如何用CSS实现2D与3D的转换效果（transform）

css的兼容性问题

W3C组织是对网络标准制定的一个非盈利组织。其成员包括一些大型互联网技术、供应商、团体用户、研究实验室、标准制定机构和政府部门。由于各大浏览器使用的标准不一样，导致了有些样式写了但网页不兼容，W3C设定了整个平台的规则，监督整个过程，使样式最大程度的被各大浏览器实现。
CSS2.1的兼容性很好，css3要考虑兼容性问题。
在需要考虑兼容性的样式前要加浏览器前缀。
浏览器前缀 ：
谷歌 苹果 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-
可以使用https://www.caniuse.com进行浏览器兼容性查询。

2D过渡方式（transition-后缀）

transition 过渡
之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。

css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。

transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必填
transition-duration: 过渡的时间，单位可以是s或者ms。 必填
transition-delay:指定过渡生效的延迟时间。
transition-timing-function:
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
复合属性：transition：all 3s linear 1s;
书写顺序：过渡属性 完成时间 运动曲线 延迟时间

一般有数值/中间状态的属性才可以设置过渡，比如：width，height

具有过渡属性的样式（transform）

缩放（transform：scale(x,y) ）

transform：scale(x,y);

x:代表水平方向的缩放倍数
y：代表垂直方向的缩放倍数。
如果只写一个值，代表等比例缩放。
不会改变真实宽高，也不会旁边的盒子造成影响。
解释：以图片中心为原点向外（X和Y方向）放大两倍。

位移（transform：translate(xpx,ypx) ）

tramsform：translate（水平位移，垂直位移）;
位移是以盒子本身的水平轴进行移动，不是网页显示的水平或垂直方向。
位移取值单位：

• px正值：向右或向下。
• 百分比是按照盒子本身的宽高。

像素值：

 transform: translate(100px, 100px);

百分比：
transform: translate(50%, 50%);
只写一个值时，是水平位移。

旋转（transform：rotate()）

transform：rotate（角度）
角度取值单位：deg

 transform: rotate(45deg);

位移+旋转

transform 后面可以书写多个转换，但是书写顺序不同，效果不同。

倾斜（transform：skew()）

transform：skew（水平倾斜角度，垂直倾斜角度）
角度取值单位：deg，正值顺时针，负值逆时针。

所有的转换属性，只能添加给块级元素，行内元素无效。

 transform: skew(0, 45deg);

3D效果

3D旋转：

transform:rotate3D(x,y,z,deg);
x,y,z是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度。
rorateX，X轴旋转
rorateY，Y轴旋转
rorateZ，Z轴旋转，相当于在当前平面内旋转
旋转的方向：左手法则
左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。

位移：

transform:translateX();//沿着x轴移动
transform:translateY();//沿着Y轴移动
transform:translateZ();//沿着Z轴移动，有纵深的效果，
transform:translate3d(x,y,z);

  div:hover {
            transform: translatez(-100px);
        }

透视perspective：

设置给变换盒子的父容器。
透视：
设置用户眼睛与屏幕的距离。
透视效果只是视觉上的呈现，不是真正的距离。

translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。

3D呈现transform-style

某个图形是由多个元素组成的。可以给这些元素的父元素添加一个transform-style：persevere-3d来使其变成一个真正的3d图形。