<!--
.div1
{
position: relative;
height: 150px;
width: 150px;
margin: 0px;
padding:2px;
border: 1px solid black;
perspective:550;
-webkit-perspective:550;
perspective-origin: 50% 100px;
-webkit-perspecitve-origin: 50% 100px;
}
.div2
{
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-webkit-animation: rotateXing 1.8s infinite linear;
animation: rotateXing 1.8s infinite linear;
width:148px;
height:148px;
text-align:center;
line-height:148px;
}
.div3
{
position: absolute;
border: 1px solid black;
background-color: green;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-webkit-animation: rotateYing 2.8s infinite linear;
animation: rotateYing 2.8s infinite linear;
width:148px;
height:148px;
text-align:center;
line-height:148px;
}
@-webkit-keyframes rotateXing {
from {
transform: rotateX(1deg);
-webkit-transform: rotateX(1deg);
}
to {
transform: rotateX(359deg);
-webkit-transform: rotateX(359deg);
}
}
@keyframes rotateXing {
from {
transform: rotateX(1deg);
-webkit-transform: rotateX(1deg);
}
to {
transform: rotateX(359deg);
-webkit-transform: rotateX(359deg);
}
}
@-webkit-keyframes rotateYing {
from {
transform: rotateY(1deg);
-webkit-transform: rotateY(1deg);
}
to {
transform: rotateY(359deg);
-webkit-transform: rotateY(359deg);
}
}
@keyframes rotateYing {
from {
transform: rotateY(1deg);
-webkit-transform: rotateY(1deg);
}
to {
transform: rotateY(359deg);
-webkit-transform: rotateY(359deg);
}
}
-->
M
M
.div1
{
position: relative;
height: 150px;
width: 150px;
margin: 0px;
padding:2px;
border: 1px solid black;
perspective:550;
-webkit-perspective:550;
perspective-origin: 50% 100px;
-webkit-perspecitve-origin: 50% 100px;
} .div2
{
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-webkit-animation: rotateXing 1.8s infinite linear;
animation: rotateXing 1.8s infinite linear;
width:148px;
height:148px;
text-align:center;
line-height:148px;
}
.div3
{
position: absolute;
border: 1px solid black;
background-color: green;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-webkit-animation: rotateYing 2.8s infinite linear;
animation: rotateYing 2.8s infinite linear;
width:148px;
height:148px;
text-align:center;
line-height:148px;
}
@-webkit-keyframes rotateXing {
from {
transform: rotateX(1deg);
-webkit-transform: rotateX(1deg);
}
to {
transform: rotateX(359deg);
-webkit-transform: rotateX(359deg);
}
}
@keyframes rotateXing {
from {
transform: rotateX(1deg);
-webkit-transform: rotateX(1deg);
}
to {
transform: rotateX(359deg);
-webkit-transform: rotateX(359deg);
}
}
@-webkit-keyframes rotateYing {
from {
transform: rotateY(1deg);
-webkit-transform: rotateY(1deg);
}
to {
transform: rotateY(359deg);
-webkit-transform: rotateY(359deg);
}
}
@keyframes rotateYing {
from {
transform: rotateY(1deg);
-webkit-transform: rotateY(1deg);
}
to {
transform: rotateY(359deg);
-webkit-transform: rotateY(359deg);
}
}