transform

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

尝试一下

警告： 只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。

语法

css

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
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, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

transform属性可以指定为关键字值 none 或一个或多个 <transform-function> 值。

值

<transform-function>

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

none

不应用任何变换。

语法格式

transform = 
  none              |
  <transform-list>  

<transform-list> = 
  <transform-function>+

示例

HTML

html

<div>Transformed element</div>

CSS

css

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

结果

有关更多示例，请参阅使用 CSS 变换和<transform-function>。

规范

Specification
CSS Transforms Module Level 2
# transform-functions
CSS Transforms Module Level 1
# transform-property
初始值none
适用元素transformable elements
是否是继承属性否
Percentagesrefer to the size of bounding box
计算值as specified, but with relative lengths converted into absolute lengths
Animation typea transform
Creates stacking contextyes

浏览器兼容性

BCD tables only load in the browser

参见