css系列-transform变形动画

最新推荐文章于 2024-04-11 15:13:38 发布

原创最新推荐文章于 2024-04-11 15:13:38 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

文章标签：

#css #动画

css 专栏收录该内容

17 篇文章

订阅专栏

本文深入讲解CSS中的元素变形操作，包括坐标系统、2D及3D转换、缩放、旋转和倾斜等。详细介绍了transform规则的使用方法，如translate、scale、rotate和skew等，以及如何控制元素在X、Y、Z轴上的变形。

基础知识

坐标系统

要使用元素变形操作需要掌握坐标轴，然后通过改变不同坐标来控制元素的变形。

X轴是水平轴
Y轴是垂直轴
Z轴是纵深轴

变形操作

使用 transform 规则控制元素的变形操作，包括控制移动、旋转、倾斜、3D转换等，下面会详细介绍每一个知识点。

下面是CSS提供的变形动作。

选项	说明
none	定义不进行转换。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

变形叠加

重复设置变形操作时只在原形态上操作。

默认处理

下面设置了两次移动，并不会移动 550px 而是只移动50px。

<style>
    div {
        transform: translateX(500px);
        width: 100px;
        height: 100px;
        background: #9b59b6;
    }

    div:nth-child(1) {
        transform: translateX(50px);
    }
</style>

<div></div>

伪类叠加

Untitled

<style>
    div {
        transition: 2s;
        transform: translateX(200px) translateX(50px);
        width: 100px;
        height: 100px;
        background: #9b59b6;
    }

    div:hover {
        transition: 2s;
        transform: translateX(100px);
    }
</style>

<div></div>