CSS3 perspecitve属性
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); } }