css3变形效果3D

由于3D是立体三维，在x、y轴的基础上一般会多出一个z轴，深入跃出轴。

要使用transform实现3D效果，首先需要为该元素或该元素的直接父元素设置如下2个属性属性

1、transform-style 该属性是指定嵌套元素如何在3D空间中呈现

属性值： flat 默认值，表示所有子元素在2D平面呈现

preserve-3d 表示子元素在3D空间呈现

2、perspective 该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而

投放到一个2D平面上。

属性值： none 默认值，表示无限的角度来看3D物体，但看上去是平的

长度值 接受一个长度单位大于0的值，其单位不能为百分比。值越大，角

度出现的越远，3D物体越小，直至3D原有的大小

以上两个属性的示例如下：

eg. div{

perspective:1000px;

transform-style:preserve-3d;

}

注意：上面的两个值设置在该元素，或该元素的直接父元素中，显示的效果是不一样的。

一、translate3d(x,y,z) 必须写三个参数，且这三个参数可以为负值

eg. img{

transform:translate3d(100px,100px,300px);

}

还可以直接写translateZ(),这样默认x和y轴的值为0

eg. img{

transform:translateZ(-300px);

}

二、scale3d(x,y,z) 3D缩放，单独设置无效，需要配合角度

eg. img{

transform:scale3d(1,1,1.5) rotateX(45deg);

}

scaleZ(z) 单独设置z轴，x和y轴默认为1

eg. img{

transform:scaleZ(1.5) rotateX(45deg);

}

三、rotate3d(x,y,z,a) 设置3D旋转，a表示角度，xyz是0或1之间的数值

eg. img{

transform:rotate3d(1,0,0,45deg);

}

rotateX(a)、rotateY(a)、rotateZ(a) 单独设置3D旋转，可以分开写，也可写在一起

eg. img{

//transform:rotateX(45deg);

transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);

}

perspective-origin 改变3D元素变形的基准点，默认是元素的中心位置，如果改变了基准点。

它就会按照这个基准点进行变形。

属性值可以使用关键字，也可以使用百分数和具体值

关键字如下：

1、指定x轴的位置 left、center、right

2、指定y轴的位置 top、center、bottom

eg. div{

perspective-origin:left top;

perspective-origin:0px 0px;

perspective-origin:0% 0%;

}

注意：transform和transform-origin要求的版本比较高，所以除了标准的，最好写上带前缀的。