第二十四章  CSS3变形效果【下】

一、3D变形简介

【上】讲的是2D，本章讲的是3D（在二维基础上多出一个z轴）。

属性值                              说明

translate（x,y,z）      3D方式平移元素，设置x,y和z轴

translateZ(z)           设置3D方式平移元素的z轴

scale3d(x,y,z)          3D方式缩放一个元素

scaleZ(z)               设置3D方式缩放元素的z轴

rotate3d(x,y,z,a)       3d方式旋转元素

rotateX(a)

rotateY(a)              分别设置3D方式的旋转元素的x,y,z轴

rotateZ(a)

perspective(长度值)     设置一个透视投影矩阵

matrix3d(多个值)        定义一个矩阵

3D变形比2D变形出来的要晚一些，如果需要兼容旧版本浏览器，可以对照这个表

Opera     Firefox     Chrome      Safari       IE

支持需带前缀    15～22     10～15      12～35       4～8        无

支持不带前缀      23+        16+         26+         无       10.0+

//兼容版本完整形式

-webkit-transform：translateZ（200px）;

·

·

·

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

（1）flat       :默认值，表示所有子元素在2D平面呈现

（2）preserve-3d:表示子元素在3D空间呈现。

//一般设置当前元素的父元素

transform-style：preserve-3d;  （需要配合后面的属性才能看到，同样，这个属性也需要加上前缀）

三、perspective：是3D变形的重要属性，该属性会设置查看者位置，并将可视内容映射到一个视锥上，继而投放到一个2D平面上。

属性值                              说明

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

长度值           接受一个长度单位大于0的值，其单位不能为百分比，值越大，角度出现的越远。（好比你离远看物体，值越小，正相反）

四、3D变形属性

1、translate3d(x,y,z)    //需要3D位移的html结构，必须有父元素包含

<div id="a">

<img src="img.png" alt=""/>

</div>

//css部分，父元素设置3D呈现且设置透视距离

#a{

perspective:1000px;

transform-style:preserve-3d;

}

img{

//z轴可以是负值

transform:translateZ(240px);

}

2、transformZ(z)    //z轴可以单独设置，z轴可以是负值

img{;

transform：translateZ（240px）

}

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

img{

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

}

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

img{

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

}

5、rotate3d(x,y,z,a)  //设置3D旋转，a表示角度，xyz是0或1（0表示未启用，1表示启用）

transform:scale3d(1,1,1，45deg）；   //xyz轴都启用

transform:scale3d(1,0,0，45deg）；   //x轴启用，且x轴旋转45度

6、rotateX（a）、rotateY（a）、rotateZ（a）      //单独设置3D旋转

transform：rotateX（45deg）；

·

·

transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）

CSS3还提供了perspective-origin属性来设置3D变形中的原点角度，该属性的默认值为50% 50%也就是center center。

属性值                     说明

百分数值           指定元素x轴成y轴的起点

长度值             指定距离

left

center             指定x轴的位置

right

top

center             指定y轴的位置

bottom

//源点设置右上方变形

perspective-origin:topright;

CSS3还提供了一个元素中设置透视的值perspective（长度值），但他还是和父元素这只有一定不同，因为父元素整个作为透视，而元素自己作为透视，导致不同

//具体测试看透视距离

img{

transform:perspective(1000px) rotateY(45px);

}