使用css完成一个三维立体旋转相册
本篇主要通过这个实践练习transform及3D旋转。
浏览器中,3D旋转时,主要看x轴、y轴、z轴的方向,旋转所绕的轴是一条横线,为x轴旋转,竖线,为y轴旋转,x和y轴都在显示器所在的平面上。z轴则垂直显示器所在的平面。
说到3D,必须提到的一个词:透视,也就是perspective,perspective属性定义3D元素距视图的距离,以像素计,定义观察者在z轴上与3D元素的距离(沿着z轴,与浏览器所在面垂直着,向前走,向后走…,越向前,值越小,越“靠近”3D元素,靠近到0时,看不见了!此刻元素在你脑后!越“远离”,值越大,大到一定程度时,也看不见了!此刻元素已经化身为一个点了…),与之配合的一个属性叫做perspective-origin,两个值,分别定义视角在x轴偏离的角度(从左边向右👉看?从正前方看?从右边向左👈看?)和在y轴偏离的角度(从上边👇俯视?从正前方看?从下边👆仰视?)。
html代码:
<div class="stage">
<div class="wrapper">
<img src="http://ww1.sinaimg.cn/large/854f1e58jw1exjhap4pg2j21jk1jku0x.jpg"/>
<img src="http://ww3.sinaimg.cn/thumb180/854f1e58jw1f3adtzqrgvj21j01j0x26.jpg"/>
<img src="http://tupian.aladd.net/2015/7/2748.jpg"/>
<img src="http://ww3.sinaimg.cn/bmiddle/89f08a15gw1f3nc7unjq4j20k00k0dhd.jpg"/>
<img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic1501/M04/0D/54/wKhTlFcr1i-EX9ZYAAAAAG2hseo834.jpg"/>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7Mf-EWjUIFy77lI2zj2bOyTEcF78SS_AYMo6PfFWzYDQsa_9HEg"/>
</div>
</div>
stage是整个3D旋转相册的舞台,wrapper是一组相册的包装元素。
css代码如下,stage需要设置perspective,wrapper要定义transform-style: preserve-3d。
对于img,首先通过absolute让一组元素重叠起来,然后分别设置旋转角度,六张图片,角度均匀分布的话,每个应该相差60度,此时六个图片仍然重叠在一起,只是各自面向不同的方位,接下来就是一个重要的设置:translateZ。
当元素面向浏览器(没有rotateX或者Y)时,translateZ的运动垂直于浏览器所在的平面,而设置了旋转之后,z轴会分别垂直于各个元素旋转之后所在的平面,因此,对于不同方向的img,translateZ相当于让它们像花儿开放一样,手拉手,背对背,分散开来~
<style>
.stage {
perspective: 800px;
position: relative;
height: 400px;
}
.wrapper {
transform-style: preserve-3d;
height: inherit;
}
.wrapper img {
position: absolute;
width: 108px;
height: 108px;
padding: 10px;
background: #eee;
left: 200px;
}
.wrapper img:nth-child(1) { transform: rotateY( 0deg ) translateZ(150px); }
.wrapper img:nth-child(2) { transform: rotateY( 60deg ) translateZ(150px); }
.wrapper img:nth-child(3) { transform: rotateY( 120deg ) translateZ(150px); }
.wrapper img:nth-child(4) { transform: rotateY( 180deg ) translateZ(150px); }
.wrapper img:nth-child(5) { transform: rotateY( 240deg ) translateZ(150px); }
.wrapper img:nth-child(6) { transform: rotateY( 300deg ) translateZ(150px); }
@keyframes rotatehaha {
0% {transform: rotateY(0deg);}
16% {transform: rotateY(60deg);}
32% {transform: rotateY(120deg);}
48% {transform: rotateY(180deg);}
64% {transform: rotateY(240deg);}
80% {transform: rotateY(300deg);}
}
</style>
over。如果要旋转整个相册,给wrapper元素加上transform: rotateY(${num}deg)就可以。自动旋转的话,可以写个小动画:
.wrapper {
transform-style: preserve-3d;
height: inherit;
animation: rotatehaha 10s infinite;
}
@keyframes rotatehaha {
0% {transform: rotateY(0deg);}
16% {transform: rotateY(60deg);}
32% {transform: rotateY(120deg);}
48% {transform: rotateY(180deg);}
64% {transform: rotateY(240deg);}
80% {transform: rotateY(300deg);}
}
对于上边设置的3D相关的属性,可以在浏览器审查元素中通过上下键改变值的大小,感受全方位360度的视角,加深理解…