CSS3实现3D轮播图

发表于 2017-09-25 更新于 2022-12-06 阅读次数：

html5 css3

想学好3D变换，必须先理解表示空间方向的XYZ轴，这个其实很容易理解，毕竟高中做了辣么多的函数方程题，要注意的是Z轴，向着自己的方向就是Z的方向。

旋转：transform : rotateX()/rotateY()/rotateZ()
这个项目很明显是用rotateY(angle)

这个单词的意思是视角，故名思义，就是眼睛的位置，有两种写法：
1.写在舞台元素上，也就是动画元素的父元素上

1
2
3

.stage{
		perspective: 800px;
}

2.写在动画元素上，写在transform属性里

1
2
3

.stage .box{
		transform:perspective(800px) rotate(60deg);
}

视角的位置不一样，看到的景物也是有区别的，换个角度思考也是这个说法。
其实上面的两种写法是有区别的，前者视角在舞台的中心，后者则是在动画元素的中心。

.stage{
		perspective: 800px;
		perspective-origin:25% 250px;
}

当所有图片都以同一个旋转中心旋转后，其实是没有立体感的，这时候就需要用到这个属性translateZ

1
2
3

.stage .box{
		transform: rotate(60deg) translateZ(500px); 
}

1	aImg[i].style.webkitTransform = "rotateY("+ ( - (count60 - i60) )+ "deg) translateZ(" + 483+"px)";

需要注意的是，aImg[i].style.webkitTransform只能用来设置css的transform属性，并不能用alert打印出来。同offsetLeft也left一样。