CSS3转换属性（Transform）

最新推荐文章于 2024-09-05 18:36:59 发布

大聪明码农徐

最新推荐文章于 2024-09-05 18:36:59 发布

阅读量3.9k

点赞数 8

分类专栏：前端HTML与CSS 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_45799465/article/details/122699588

版权

前端HTML与CSS 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

变形属性：transform

transform翻译成汉语具有"变换"或者"改变"的意思。

通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果

最能体现transform 属性强大实力的是实现元素的3D变换效果

变形属性：transform的所有属性值

transform：none;	默认值
transform：translate（）；	移动平移单位是px
transform：rotate（）；	旋转单位是deg deg度数
transform：scale（）；	缩放没有单位默认值是1
transform：skew（）；	倾斜单位是deg
transform：matrix（）；	矩阵
transform：perspective（）；	景深视距单位是px

确定坐标系

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴

3d场景，在垂直于屏幕的方法，相对于3d多出个z轴

Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

属性详细解释

（一）transform：translate（）；移动平移单位是px。

注意：

transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的。

transform ：translateX(200px)；	根据X轴给定的参数，从当前元素位置移动。
transform ：translateY(200px)；	根据Y轴给定的参数，从当前元素位置移动。
transform ：translateZ(200px)；	定义 3D 转换，只是用 Z 轴的值。
transform ：translate(10px,20px)；	定义 2D 平移移动。
transform ：translate3d(10px,20px,30px)；	定义 3D 平移移动。
transform ：translateX(200px) translateY(200px) translateZ(200px)；

部分代码展示：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            margin: 300px;
            background-color: red;
        }

        div:nth-of-type(1) {
            transform: translateX(100px);
        }

        div:nth-of-type(2) {
            transform: translateY(200px);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

运行结果：

可以看到X轴就是水平运动，Y轴就是垂直运动。

（二）transform：rotate（）；旋转单位是deg deg度数。

注意：

transform ：rotate(30deg)；旋转单位deg 默认是Z轴旋转。

transform ：rotateX(30deg)；	根据X轴给定的参数，从当前元素位置旋转。
transform ：rotateY(30deg)	根据Y轴给定的参数，从当前元素位置旋转。
transform ：rotateZ(30deg)；	定义 3D 转换，只是用 Z 轴的值。
transform ：rotate3d(0,0,1,30deg)；	定义 3D 旋转。
transform ：rotateX(30deg) rotateY(30deg) rotateZ(30deg)；

部分代码展示：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            margin: 300px;
            background-color: red;
            /* 过渡动画，详细属性详见往期博客 */
            transition: 2s;
        }

        div:nth-of-type(1):hover {
            /* 绕X轴旋转 */
            transform: rotateX(180deg);
        }

        div:nth-of-type(2):hover{
            /* 绕Y轴旋转 */
            transform: rotateY(180deg);
        }
        div:nth-of-type(3):hover{
            /* 绕Z轴旋转 */
            transform: rotate(180deg);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

运行结果：

（三）transform：scale（）；缩放没有单位默认值是1

注意：

transform ：scale(2)；缩放默认是X和Y同时缩放默认值是1。

transform ：scaleX(2)；	通过设置 X 轴的值来定义缩放转换
transform ：scaleY(3)；	通过设置 Y 轴的值来定义缩放转换。
transform ：scaleZ(2)；	通过设置 Z 轴的值来定义 3D 缩放转换。
transform ：scale(2,5)；	定义 2D 缩放。
transform ：scale3d(2,3,4)；	定义 3D 缩放。
transform ：scaleX(2) scaleY(3) scaleZ(3)；该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放

部分代码展示：

运行结果：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            margin: 300px;
            background-color: red;
            /* 过渡动画，详细属性详见往期博客 */
            transition: 1s;
        }

        div:nth-of-type(1):hover {
            /* 默认缩放 */
            transform: scale(2)
        }
        div:nth-of-type(2):hover{
            /* X轴缩放 */
            transform: scaleX(2)
        }
        div:nth-of-type(3):hover{
            /* Y轴缩放 */
            transform: scaleY(2)
        }

    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

运行结果：

（四）transform：skew（）；倾斜单位是deg。

注意：

倾斜没有Z轴的写法。

transform ：skewX(30deg)；	通过设置 X 轴的值来定义倾斜转换
transform ：skewY(30deg)；	通过设置Y 轴的值来定义倾斜转换
transform ：skew(30deg,130deg)；	定义2D倾斜
transform ：skewX(30deg) skewY(130deg) ；

部分代码展示：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            margin: 300px;
            background-color: red;
            /* 过渡动画，详细属性详见往期博客 */
            transition: 1s;
        }
        div:nth-of-type(1):hover {
            /* 默认倾斜 */
            transform: skew(30deg, 30deg)
        }
        div:nth-of-type(2):hover {
            /* X轴倾斜 */
            transform: skewX(30deg)
        }
        div:nth-of-type(3):hover {
            /* Y轴倾斜 */
            transform: skewY(30deg)
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

运行结果：