css3做照片旋转,纯css3图片旋转

* {

margin:0;

padding:0;

}

html {

background-color:rgb(240,130,57);

}

/*

那么问题来了,这个perspective是加在哪个位置呢？

假设我们加在ul上面，那么我们的图片开始转动的时候(即转动ul==>raotateY())

那么我们的视角和上面说的translate的坐标一样会随的图片的转动而变化。

然后出现奇葩的图片。

因此我们需要在ul外面加一个box给box加视角perspective。

这样弄的话视角就永远不会变动，因为转动的是box。

*/

.box {

width:133px;

height:200px;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

perspective:3000px;

transform-style:preserve-3d;

}

ul {

transform-style:preserve-3d;

transform:rotateX(-35deg);

width:133px;

height:200px;

border:2px solid rgb(77,177,20);

box-shadow:2px 2px 5px #fff;

}

li {

list-style:none;

position:absolute;

width:133px;

height:200px;

box-shadow:2px 2px 5px #fff;

}

li:nth-of-type(1) {

animation:myAni1 3s linear forwards;

}

li:nth-of-type(2) {

animation:myAni2 3s linear forwards;

}

li:nth-of-type(3) {

animation:myAni3 3s linear forwards;

}

li:nth-of-type(4) {

animation:myAni4 3s linear forwards;

}

li:nth-of-type(5) {

animation:myAni5 3s linear forwards;

}

li:nth-of-type(6) {

animation:myAni6 3s linear forwards;

}

li:nth-of-type(7) {

animation:myAni7 3s linear forwards;

}

li:nth-of-type(8) {

animation:myAni8 3s linear forwards;

}

li:nth-of-type(9) {

animation:myAni9 3s linear forwards;

}

li:nth-of-type(10) {

animation:myAni10 3s linear forwards;

}

li:nth-of-type(11) {

animation:myAni11 3s linear forwards;

}

li:nth-of-type(12) {

animation:myAni12 3s linear forwards;

}

@keyframes myAni1 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(360deg) translateZ(400px);

}

}@keyframes myAni2 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(330deg) translateZ(400px);

}

}@keyframes myAni3 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(300deg) translateZ(400px);

}

}@keyframes myAni4 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(270deg) translateZ(400px);

}

}@keyframes myAni5 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(240deg) translateZ(400px);

}

}@keyframes myAni6 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(210deg) translateZ(400px);

}

}@keyframes myAni7 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(180deg) translateZ(400px);

}

}@keyframes myAni8 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(150deg) translateZ(400px);

}

}@keyframes myAni9 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(120deg) translateZ(400px);

}

}@keyframes myAni10 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(90deg) translateZ(400px);

}

}@keyframes myAni11 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(60deg) translateZ(400px);

}

}@keyframes myAni12 {

0% {

transform:rotateY(0) translateZ(0);

}

100% {

transform:rotateY(30deg) translateZ(400px);

}

}