css33d图片轮播_CSS3,3D效果轮播图

---恢复内容开始---

大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧!

....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果:

3D图片切换1

/*设置一个关键帧*/

@-webkit-keyframes open {

0% {

-webkit-transform: rotateX(180deg);

opacity: 0;

}

57% {

-webkit-transform: rotateX(-16deg);

opacity: 1;

}

66% {

-webkit-transform: rotateX(14deg);

}

74% {

-webkit-transform: rotateX(-12deg);

}

81% {

-webkit-transform: rotateX(10deg);

}

87% {

-webkit-transform: rotateX(-8deg);

}

92% {

-webkit-transform: rotateX(6deg);

}

96% {

-webkit-transform: rotateX(-4deg);

}

100% {

-webkit-transform: rotateX(0deg