CSS transform and rotate with animation - html

Question

HTML
<div id="div1">
<div id="div2">HELLO</div>
</div>
<div id="div3">
<div id="div4">HELLO</div>
</div>
CSS
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:150px; /* Chrome, Safari, Opera */
perspective:150px;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform-origin:0%; /* Chrome, Safari, Opera */
-webkit-transform: rotateY(117deg); /* Chrome, Safari, Opera */
transform: rotateX(-75deg);
}
#div3
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:150px; /* Chrome, Safari, Opera */
perspective:150px;
}
#div4
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform-origin:0%; /* Chrome, Safari, Opera */
-webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera */
transform: rotateX(-75deg);
}
Trying to do this rotate the inner div from starting position to final position with a delay 2
Two positions
Code for doing above got it from Here But its not working .What changes to make to make it work
-webkit-backface-visibility: visible;
-webkit-transform-origin: 0% 50%;
-webkit-transform: perspective(800px) rotateY(90deg) rotateY(-90deg);

Answer 1

Here: FIDDLE: http://jsfiddle.net/9dqAK/12/
HTML
<div id="stage">
<div id="spinner">
hello
</div>
</div>
CSS
#-webkit-keyframes spinner {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
}
}
#spinner {
-webkit-transform-origin: 150px 0 0;
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-webkit-transform-style: preserve-3d;
-moz-transform-origin: 150px 0 0;
-moz-animation-name: spinner;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 6s;
-moz-transform-style: preserve-3d;
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
}
#spinner:hover {
-webkit-animation-play-state: paused;
}

Answer 2

You forgot to add when to do the animation. I assume that it is upon let's say hover.
So, add end styles to :hover pseudo-class. And, also specify some transition so that you can see it animating.
Demo: http://jsfiddle.net/abhitalks/WEX75/4/
CSS:
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:150px;
}
#div2 {
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
-webkit-transform-origin:0%;
-webkit-transform: rotateY(117deg);
transition: 1s all;
}
#div1:hover > #div2 {
-webkit-backface-visibility: visible;
-webkit-transform-origin: 50% 50%;
-webkit-transform: perspective(500px) rotateY(0deg);
}
Edit: (After reading Op's comments somewhere above)
You want the animation to happen on page load. So, in that case just apply the relevant CSS using jQuery. Wrap that code in domready.
Demo 2: http://jsfiddle.net/abhitalks/WEX75/3/
JS:
$("#div2").css({
'-webkit-backface-visibility': 'visible',
'-webkit-transform-origin': '50% 50%',
'-webkit-transform': 'perspective(500px) rotateY(0deg)'
});
Edit 2:
You can introduce a delay of 2s by using transition-delay: 2s;.
Demo 3: http://jsfiddle.net/abhitalks/WEX75/5/

Answer 3

Add -webkit- to your last transform CSS declaration