CSS3 3D transform

3D transform中有下面这三个方法：

• rotateX( angle )

• rotateY( angle )

• rotateZ( angle )

邹凯的体操单杠运动是rotateX:

 

蔡依林姐姐的钢管舞是

rotateY:

 

旋转飞刀的特技表演是

rotateZ:

 

2.perspective属性,透视点,CSS3 3D transform的透视点是在浏览器的前方！

比方说，一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的

perspective

大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！

 

3.translateZ帮你寻找透视位置

则其子元素，设置的

translateZ

值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；

translateZ

值越大，该元素也会越来越大，当

translateZ

值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当

translateZ

值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！

 

 

4.perspective-origin:位置

5.transform-style: preserve-3d;前者

flat

为默认值，表示平面的；后者

preserve-3d

表示3D透视。

6.backface-visibility:hidden;背后的元素不可见,默认是可以见

//旋转木马

舞台  (perspective)
容器  (transform-style:preserve-3d)
图片
图片
图片
...
如果有9张图片，则每个图片的旋转角度累加40(360 / 9 = 40)

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

translateZ来调整位置,

translateZ值等于 r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8

要让木马旋转起来，只要让容器每次旋转40度就可以了。

 

//获取css3的的元素

function setCss3(obj,attrStyle){
var obj = document.getElementById(obj);
for(var i in attrStyle){
// console.log(obj.style[i]);         //属性名
// console.log(attrStyle[i]);      //属性值
var newI = i;
newI = newI.replace(newI.charAt(0),newI.charAt(0).toUpperCase());

if(newI.indexOf("-") > 0){              //如果有多属性名的"-"，则将其转化成驼峰大写形式
var num = newI.indexOf("-");
// console.log(newI.substring(num+1,num+2))  //找到"-"后跟首的字母
// console.log(newI.substring(num+1,num+2).toUpperCase())   //找到"-"后跟首的字母转化成大写
newI = newI.replace(newI.substring(num,num+2),newI.substring(num+1,num+2).toUpperCase());         //替换
}
// console.log(newI);
obj.style[newI] = attrStyle[i];
obj.style["webkit" + newI] = attrStyle[i];
obj.style["moz" + newI] = attrStyle[i];
obj.style["o" + newI] = attrStyle[i];
obj.style["ms" + newI] = attrStyle[i];
}
}