transform相关~

transform

1，定义：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

2D Transform 方法

1. 1. translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
   2. rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
   3. scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

   4. matrix() 和2D变换方法合并成一个。
      matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

   5. skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
      skewX(<angle>);表示只在X轴(水平方向)倾斜。
      skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

 

3D 转换属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

CSS3 过渡

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

转载于:https://www.cnblogs.com/wykid/p/8263094.html