css中的transform属性

css中的transform属性

定义

CSS中的transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的

帮助文档
快捷键目录标题文本样式列表链接代码片表格注脚注释自定义列表LaTeX 数学公式插入甘特图插入UML图插入Mermaid流程图插入Flowchart流程图插入类图

语法：

transform: none;

transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

transform: translateX(10px) rotate(10deg) translateY(5px);

transform: inherit;
transform: initial;
transform: unset;

transition:all 5s ease;//设置所有动画5秒内完成，ease设置变化速率

transform-function

要应用的一个或多个CSS变换函数。 变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。

注意

（1）只能转换由盒模型定位的元素。如果元素具有display: block，则由盒模型定位元素。
（2）transform属性可以指定为关键字值none 或一个或多个transform-function值。
（3）一般旋转的转轴都是以div的中心来旋转，我们可以使用transform-origin来设置转轴的方向。可以设置的值有水平方向上可以设置的值：left、center、right；竖直方向上可以设置的值：top、center、bottom。两个方向共同设置，例如：transform-origin：left top。表示以左上角为转轴。
（4）ease：表示动画以低速开始，然后加快，在结束前变慢。linear：表示匀速。ease-in：表示动画以低速开始。ease-out：表示动画以低速结束。ease-in-out：表示动画以低速开始和结束。