transform属性

transform2d

大部分transform属性配合transition过度属性

过度属性

transition:() .1s

平面转换属性

transform：

位移属性translate

基于自身的位移

水平方向X：右正左负

垂直方向Y：下正上负

transform:translate(x,y);

旋转属性rotate

（默认基于自身中心点旋转）

角度单位deg

transform:rotate(角度);

改变旋转属性中心点origin

取值：

left right top bottom content

具体像素

百分比（参照盒子自身尺寸计算）

transform:orign(水平方向 垂直方向)

背景图片缩放scale

（基于自身的倍数）

transform:scale(具体倍数);

背景图片的渐变效果linear-gradient（）

to right 从左到右

to right bottom 从左上角到右下角

background-image:linear-gradient(
    transparent,
    rgba(0,0,0,.5)
);

元素透明度opacity

取值 0~1

opacity:.5;

transform3d

Z轴是视线方向，移动效果应该是距离的远近，电脑屏幕是平面，默认无法观察远近效果，但能通过perspective实现Z轴的实现

透视效果perspective

(正值面向屏幕外自己，负值面向屏幕里面)

添加给父级

取值一般在800px~1200px

perspective:1000px;

使用transform-style：preserve-3d呈现立体图形（使子元素处于真正的3d空间）

添加给父级（父级添加了这个属性，Z轴的平面转换不需要再写perspective）立体图形必须设宽高

transform-style:preserve-3d;

transform：translate3d（数值，数值，数值，角度）

transform:translate3d(1,1,1,30deg)

角度：trabsform:rotate

transform:rotateX(角度)

（面对x轴，右正左负 角度上翻屏幕里面是正值 下翻屏幕里面是负值）

transform:rotateX(30deg)(正值，上翻屏幕里面30度)

transform:rotateY(角度)

（面对Y轴，下正上负 角度 右翻屏幕里面是正值 左翻屏幕里面是负值）

transform:rotateY(30deg)（正值，右翻屏幕里面30度）

transform：rotateZ(角度)

（正脸面对屏幕的Z轴，右正左负 )

transform:rotate(30deg)(正值，立体右翻30度)