# 2D,3D转的呈现

2D,3D转的呈现

2D呈现

w3c

会员：各大互联网巨头

它设定了整个平台的规则，监督整个过程。

现在学习的是css2.1 但是到css3时，就要考虑兼容性问题。

浏览器前缀

谷歌 苹果 -webkit-

火狐 -moz-

IE -ms-

欧朋 -o-

sass

过渡，2D转换

​ 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);

​ x:代表水平方向的缩放倍数

​ y：代表垂直方向的缩放倍数。

​ 如果只写一个值，代表等比例缩放。

​ 不会改变真实宽高，也不会旁边的盒子造成影响。

位移 translate：

格式：

tramsform：translate（水平位移，垂直位移）

属性值：

px 正值：向右或向下。

百分比 是按照盒子本身的宽高。

只写一个值时，是水平位移。

旋转：rotate

格式： transform：rotate（角度）

单位：deg

transform-origin: 变换原点

格式： transform-origin: 水平坐标 垂直坐标

px

百分比 按照盒子的宽高。50%=center

单词 left center等

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

对于

transform: translate(100px) rotate(90deg);

transform:rotate(90deg) translate(100px) ;

第一种会先位移，再旋转

第二种会先旋转，再位移。

倾斜 skew：

格式：transform：skew（水平倾斜角度，垂直倾斜角度）

单位是deg，正值 顺时针，负值逆时针。

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

3D呈现

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

3D旋转：

transform: rotate3D(x,y,z,deg);

x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度。

rorateX，X轴旋转

rorateY，Y轴旋转

rorateZ Z轴旋转

旋转的方向：左手法则

左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。

3D位移：

transform: translateX(); //沿着x轴移动

transform: translateY();//沿着Y轴移动

transform: translateZ();//沿着Z轴移动

transform: translate3d(x,y,z);

perspective 透视：

translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。

translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。

translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。