How to use transform in css

The transform attribute in CSS can manipulate the appearance of elements, including: translate(): move the element rotate(): rotate the element scale(): scale the element skew(): distort the element matrix(): use matrix definition Custom transformation perspective(): Create 3D effects

Usage of transform in CSS

transform is a powerful property in CSS for manipulating the appearance of an element without affecting its size or position. It is implemented through a series of transformation functions, including:

Translation, rotation and scaling

• translate(): Move elements.
• rotate(): Rotate the element.
• scale(): Scale the element.

Example:

/* 将元素向右移动 50px */
transform: translate(50px);

/* 顺时针旋转元素 30 度 */
transform: rotate(30deg);

/* 将元素放大到原始尺寸的 2 倍 */
transform: scale(2);

Compound transformation

transform Attributes can be combined into multiple Transform functions to achieve more complex effects.

Example:

/* 同时向右移动元素 50px 并将其向上旋转 30 度 */
transform: translate(50px) rotate(30deg);

Transform

##transform can also be used to transform elements, thereby creating visual unique shape.

• skew(): Distort elements.
• matrix(): Use a matrix to define a custom transformation.

Example:

/* 向右倾斜元素 10 度 */
transform: skew(10deg);

/* 使用矩阵定义自定义变换 */
transform: matrix(1, 0, 0.5, 1, 0, 0);

Perspective

The perspective property in transform allows creation 3D effect, making elements appear to have depth.

Example:

/* 设置元素的透视，使其看起来具有深度 */
transform: perspective(500px);

/* 沿 z 轴旋转元素 */
transform: perspective(500px) rotateZ(30deg);

Note:

• transform will not affect the The position in the document flow.
Browser support for the
• transform attribute varies.
When using
• transform, performance may be affected, especially when animating complex transformations.

The above is the detailed content of How to use transform in css. For more information, please follow other related articles on the PHP Chinese website!