[Last Call] Learn how to a build a cloud-first strategyRegister Now


Image not rotating in Safari

Posted on 2014-08-28
Medium Priority
Last Modified: 2014-08-29
I have an image that is suppose to rotate.  Instead its flipping,  Only happening in Safari.


/*Initial CSS*/
		div.flip-3d {
		-ms-perspective: 1200px; width: 30%; float: left;
		-webkit-perspective: 1200px; width: 30%; float: left;
		perspective: 1200px; width: 30%; float: left;

		div.flip-3d figure {
		position: relative;
		-ms-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-ms-transition: 1s transform;
		-webkit-transition: 1s transform;
		transition: 1s transform;
		font-size: 20px;
		div.flip-3d figure img {
		width: 100%; height:auto;

		div.flip-3d figure figcaption {
		position: absolute;
		width: 100%; height: 100%; top: 0;
		-ms-transform: rotateY(.5turn) translateZ(1px);
		-webkit-transform: rotateY(.5turn) translateZ(1px);
		transform: rotateY(.5turn) translateZ(1px);
		background: rgba(255,255,255,0.9);
		background: rgba(255,255,255,0.9);
		text-align: center;
		/*padding-top: 45%;*/
		-ms-opacity: 0.6;
		-webkit-opacity: 0.6;
		opacity: 0.6;
		filter: alpha(opacity=60); /* For IE8 and earlier */
		-ms-transition: 1s;
		-webkit-transition: 1s;
		transition: 1s;
		-ms-transition: 1s .5s opacity;
		-webkit-transition: 1s .5s opacity;
		transition: 1s .5s opacity;
		#left span {
   	 	display: inline-block;
   		margin-top: 25%;
		#middle span {
   	 	display: inline-block;
   		margin-top: 25%;
		#right span {
   	 	display: inline-block;
   		margin-top: 25%;
		div.flip-3d:hover figure {
		-ms-transform: rotateY(.5turn); /* IE 9 */
    	-webkit-transform: rotateY(.5turn); /* Chrome, Safari, Opera */
    	transform: rotateY(.5turn);
		div.flip-3d:hover figure figcaption { 
		-ms-opacity: 1;
		-webkit-opacity: 1;
		opacity: 1;
		filter: alpha(opacity=60); /* For IE8 and earlier */ }

Open in new window

Question by:DS928
LVL 53

Accepted Solution

COBOLdinosaur earned 2000 total points
ID: 40293119
I think you need this line:
-webkit-transition: 1s transform;

to be:
-webkit-transition: 1s -webkit-transform;


Author Closing Comment

ID: 40294108
Bang!  That did it!  Thank you so very much!

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month18 days, 8 hours left to enroll

826 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question