html元素做3d变换,CSS 3D变换

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

rotateX( angle )

rotateY( angle )

rotateZ( angle )

意思是分别绕着X/Y/Z轴进行旋转。

学过一部分数学知识的人应该都能理解这里XYZ轴的意思。

可参见下图：

笛卡尔坐标系

2、perspective属性

perspective属性的存在与否决定了所看到的是2D的还是3D的。 没有透视，就不能称为3D。

3D透视

CSS3 3D transform中的透视的透视点与上面示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方，近似就是眼睛所在方位。

例如，一个1360像素宽的显示器中有张图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张图片呈现的3D效果就跟你本人在1.47个显示器宽度的地方(1360*1.47≈2000)看到的真实效果一致。

3、translateZ()

translateZ()就相当于让图片向它正在面对的方向走过来(正值)或者远去(负值)。

所以，对于没有rotateX()和rotateY()的元素，translateZ()就相当于让它向屏幕前的你走过来或离你远去。

用这种情况举例。

(1)如果，设置父元素的perspective为1000px，当你设置子元素的translateZ()的值大于或等于1000px时，元素将会从屏幕上消失！这不难理解，相当于元素走到了你眼睛的后面，而显然，眼睛看不到自己后面的东西。

(2)translateZ()的值越小，元素越小，符合我们认知中远大近小的场景。

当父元素没有设置overflow：hidden的时候，translateZ()的值十分接近perspective的值也就是1000px时，元素将充斥整个屏幕，相当于把元素拿到了你眼前。

4、perspective-origin

perspective-origin设置了你看元素的角度。默认是50% 50%；

第一个参数表示了从左向右的偏向程度，50%表示视线落在中间，不偏左也不偏右，30%则表示从左向右数30%的地方看。

第二个参数表示了从上到下的偏向程度，类同第一个参数。

perspective-origin=50% 30%

perspective-origin=50% 50%

perspective-origin=20% 50%

5、transform-style: preserve-3d

transform-style有两个可能的值：flat(默认值，平面的)和preserved-3d

(3D透视)这个属性是定义你是用什么方式看到元素，一般想要呈现3D效果就要把这个设置为preserved-3d。

一般而言，该声明应用在3D变换的元素们的父元素上，也就是舞台元素。

6、backface-visibility

在CSS3 3D中，默认情况下我们可以看到背后的元素。但是为了贴合实际，我们常常设置为backface-visibility：hidden，使背后元素不可见。

7、一个小例子(借鉴于张鑫旭的博客)

效果：

效果图

点击图片区域可以实现照片按顺时针旋转。

可以将例子复制到自己的网页中试一下！

代码：

transform 3D test

body{

margin: 0;

padding: 0;

}

.main{

width: 100%;

height: 100%;

background-color: #ccc;

text-align: center;

position: absolute;

}

.stage{

width: 900px;

min-height: 100px;

margin-left: auto;

margin-right: auto;

padding: 100px 50px;

background-color: #f0f0f0;

box-shadow: inset 0 0 3px rgba(0,0,0,.35);

-webkit-perspective: 800px;

-moz-perspective: 800px;

perspective: 800px;

-webkit-transition: top .5s;

position: relative;

top: 50%;

perspective-origin: 50% 30%;

transform: translate(0,-50%);

}

.pic{

width: 128px;

height: 80px;

box-shadow: 0 1px 3px rgba(0,0,0,.5);

-webkit-transition: opacity 1s, -webkit-transform 1s;

-moz-transition: opacity 1s, -moz-transform 1s;

transition: opacity 1s, transform 1s;

position: absolute;

bottom: 0;

}

.pic:nth-child(1) { transform: rotateY( 0deg ) translateZ(200px);}

.pic:nth-child(2) { transform: rotateY( 40deg ) translateZ(200px);}

.pic:nth-child(3) { transform: rotateY( 80deg ) translateZ(200px);}

.pic:nth-child(4) { transform: rotateY( 120deg ) translateZ(200px);}

.pic:nth-child(5) { transform: rotateY( 160deg ) translateZ(200px);}

.pic:nth-child(6) { transform: rotateY( 200deg ) translateZ(200px);}

.pic:nth-child(7) { transform: rotateY( 240deg ) translateZ(200px);}

.pic:nth-child(8) { transform: rotateY( 280deg ) translateZ(200px);}

.pic:nth-child(9) { transform: rotateY( 320deg ) translateZ(200px);}

.container{

width: 128px;

height: 100px;

margin-left: -64px;

-webkit-transition: -webkit-transform 1s;

-moz-transition: -moz-transform 1s;

transition: transform 1s;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

position: absolute;

left: 50%;

}

.orange{

background-color: orange;

}

.red{

background-color: red;

}

.green{

background-color: green;

}

.white{

background-color: white;

}

.black{

background-color: black;

}

.blue{

background-color: blue;

}

1

2

3

4

5

6

7

8

9

var x=1;

$(".container").on('click',function(){

var y=40*x;

var container=$(".container");

container.css("transform","rotateY("+(-1*y)+"deg)");

x++;

});

第一次接触CSS 3D，觉得蛮好玩的，记得之前看到过一个应用rotate做了一个很好看的旋转菜单，决定下次要试一下！