css3-变形

.css3-变形

transform 是css的变形属性，通过变形函数，设置具体的变形方式

scale()变形函数，设置元素缩放

translate()变形函数，设置元素平移，该函数如果只传一个参数，表示X轴方向平移，如果传两个参数，第二个参数是Y轴方向平移

rotate()变形函数，设置元素旋转。属性值的单位是deg(度数)，也可以是turn(圈)，属性值，正数是顺时针，负数是逆时针

skew()变形函数，设置元素倾斜。该函数如果只传一个参数，表示X轴方向倾斜度数，如果传两个参数，第二个参数是Y轴方向倾斜度数

5.动作函数补充

transition-timing-function 设置动作函数

属性值包括：ease linear ease-in ease-out ease-in-out

动作函数的取值，除了一些常规的属性值，还可以里贝塞尔曲线函数，定义特殊规则的动作

transition-timing-function:cubic-bezier(.22,1.52,.42,-0.72);

通过steps() 函数，可以将一个动作分解成多次运行

animation:move12sinfinitesteps(4)

6.3D变形

perspective 属性设置浏览器的视距：就是告诉浏览器平移到眼睛的距离是多少，一般范围我们会控制在600px-1200px

body{height:600px;border:1pxsolidgreen;perspective:800px;}

translateX() 是X轴方向平移

translateY() 是Y轴方向平移

translateZ() 是Z轴方向平移

rotate() 默认是久Z轴方向旋转

rotateZ() 是Z轴方向旋转

rotateX() 是X轴方向旋转

rotateY() 是Y轴方向旋转

3d变形样式 transform-style: preserve-3d;

transform-style:preserve-3d;transform:rotateY(45deg)rotateZ(-45deg);animation:love4sinfinite alternate;

visibility属性，用于设置元素的显示方式，属性值包括：hidden（隐藏），visible（显示）

backface-visibility属性，用于设置元素的背面颜色方式

backface-visibility: hidden，表示背面隐藏