CSS3 3D transform变换

CSS3 3D transform变换

、实际应用-图片的旋转木马效果

您可以狠狠地点击这里:图片的旋转木马效果demo

建议在足够新版本的FireFox浏览器或Safari浏览器下观看,Chrome可能需要居中定位查看,下图为效果缩略图:
CSS3 3D transform变换

原理:
那些看上去很酷酷的CSS3 3D效果其实就颠来倒去那几个属性(本文提到的这几个),折腾来折腾去,这里这个效果显然也是如此。

首先HTML结构,如下:

舞台
容器
图片
图片
图片
...

对于舞台,很简单,加个视距,比方说800像素:

 perspective: 800px;

对于容器,很简单,加个3D视图声明,如下:

transform-style: preserve-3d;

然后就是图片们了。为了不至于产生类似DNA的螺旋状效果,我们让所有图片position:absolute,公用同一个中心点。

显然,图片旋转木马是类似钢管舞旋转的运动,因此,我们关心的是rotateY的大小。

因为要正好绕成一个圈,因此,图片rotateY值正好0~360等分,于是,如果有9张图片,则每个图片的旋转角度累加40(360 / 9 = 40)度即可。因此有:

img:nth-child(1) { transform: rotateY(   0deg ); }
img:nth-child(2) { transform: rotateY( 40deg ); }
img:nth-child(3) { transform: rotateY( 80deg ); }
img:nth-child(4) { transform: rotateY( 120deg ); }
img:nth-child(5) { transform: rotateY( 160deg ); }
img:nth-child(6) { transform: rotateY( 200deg ); }
img:nth-child(7) { transform: rotateY( 240deg ); }
img:nth-child(8) { transform: rotateY( 280deg ); }
img:nth-child(9) { transform: rotateY( 320deg ); }

这样就好了吗?

No, No, No!!!

想想看那,虽然9个绝色美女每个人的方位不一样,但都站在同一个点上,早就挤作一团,A罩都挤成C了,显然是不行的(见下图只设置rotateY)!我们需要拉开空间~~

CSS3 3D transform变换

如何拉开空间,很简单。

想想看那:9个美女,分别面朝东南西北共9个不同方位,她们只要每个人向前走个4~5步,美女们之间的空间不久拉开了,呈现圆形了!想象一下夜空中,礼花绽开的场景~~

这里的向前走4~5步,聪明的人应该已经知道了,就是本文提到的translateZ, 当translateZ为正值的时候,元素会向其面对的方向走去;如果元素无旋转,就会朝显示器走来!!

现在只剩下一个问题了,美女们要向前走多远呢??

这个距离是有计算公式滴!

拿本demo距离,每张美女图片的宽度是128像素,因此,有如下理想方位效果图:
CSS3 3D transform变换

上图中红色标注的r就是的demo页面中图片要translateZ的理想值(该值可以让所有图片无缝围成一个圆)!

r的计算很简单,有初中数学水平的人应该都会:

r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8

demo页面为了好看,图片之间留了点间距,使用的translateZ的值为175.8 + 20 = 195.8.
CSS3 3D transform变换

上一篇:Python的设计哲学探究


下一篇:TensorFlow-GPU+cuda8+cudnn6+anaconda安装遇到的版本错误