前端 CSS 属性transform 平面转换详解

技术拾荒者

已于 2024-09-03 09:06:41 修改

阅读量721

点赞数 5

文章标签：前端 css

于 2024-09-02 19:53:00 首次发布

本文链接：https://blog.csdn.net/weixin_53720617/article/details/141826988

版权

可以通过设置css属性改变标签的移动位置，旋转，缩放比例，倾斜度数。

transform 是一个符合属性，一个标签的属性不可以出现两个transform。可以发他们的值写在一些。

移动的方向是：

水平左正，右负。

垂直方向，上负，下正。

首先显示transform 的属性都有那些

translateX(x)：平移元素沿 x 轴
translateY(y)：平移元素沿 y 轴
translate(x, y)：平移元素沿 x 和 y 轴
scaleX(x)：缩放元素沿 x 轴
scaleY(y)：缩放元素沿 y 轴
scale(x, y)：缩放元素沿 x 和 y 轴
rotate(angle)：旋转元素一个角度
rotateX(angle)：沿 x 轴旋转元素
rotateY(angle)：沿 y 轴旋转元素
rotateZ(angle)：沿 z 轴旋转元素
skewX(angle)：倾斜元素沿 x 轴
skewY(angle)：倾斜元素沿 y 轴
skew(angle);默认原点倾斜

1：translate 移动位置

用到的是

transform: translate(200px,100px); 表示向左移动200px,向下移动100px.

transform: translate(200px);也可以是一个值，表示向左移动200px.

transform: translate(100%); translate里的值也可以是百分比。

移动的距离是参考自身，如果自身宽度是200px，那么100%就是200px,同时高度也是同样的道理。

translateX() 表示的就是向水平方向可以作用移动。

translateY() 表示的是垂直方向移动。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平移效果</title>
    <style>
        .father{
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .son{
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
        /* 鼠标移入到父盒子,.son改变位置 */
        .father:hover .son {

            /* 做移动200px,向下移动100px */
            transform: translate(200px,100px);

            /* 百分比:参照盒子自身尺寸计算结果 */
            /* 这个向当于向左100px,向下100px */
            transform: translate(50%,100%);
            transform: translate(-50%,100%);

            /* 只写一个数表示水平方向 */
            transform: translate(100px);    

            transform: translatey(100px);
            transform: translateX(100px);

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

2：scale 缩放比例

transform: scale(2); 作用是把原来的宽高，缩放到之前的2倍。

scaleX(x)：缩放元素沿 x 轴
scaleY(y)：缩放元素沿 y 轴
scale(x, y)：缩放元素沿 x 和 y 轴

特别注意：

transform-origin: right bottom; 这个属性transform-origin：可以改变缩放的中心位置。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放效果</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
        }

        .box img{
            width: 100%;
            transition: all 1s;
        }

        .box:hover img
        {
            /* 修改宽度尺寸,从坐上角开始缩放 */
            /* width: 500px; */
            /* height: 300px; */

            /* 大于1 ,表示放大 */
            /* transform: scale(2); */

            /* 小于1,表示放小 */
            /* transform: scale(0.5); */

            /* 等于1,表示不变 */
            transform: scale(1);
            
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
    </div>
</body>

3：rotate(angle)；旋转时带上单位。

rotate(angle)：旋转元素一个角度
rotateX(angle)：沿 x 轴旋转元素
rotateY(angle)：沿 y 轴旋转元素
rotateZ(angle)：沿 z 轴旋转元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转效果</title>
    <style>
        img
        {
            width: 200px;
            transition: all 2s;
        }

        /* 鼠标悬停到图片上,添加旋转效果 */
        img:hover
        {
            /* 正数:图片是顺势针旋转,负数:图片是逆势针旋转 */
            transform:rotate(360deg);
            transform:rotate(-360deg);
        }

    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转原点</title>
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 1px solid sandybrown;
            transition: all 1s;
            /* 改变旋转得位置. */
            transform-origin: right bottom;
        }

        img:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

特别：

也可以先移动在旋转

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多种转换效果</title>
    <style>
        .box{
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }

        img{
            width: 200px;
            transition: all 5s;
        }

        /*鼠标移动到盒子里,图片边走边转*/
        .box:hover img{
            /* 先平移,在旋转 */
            transform: translate(600px) rotate(360deg);   

            /* 旋转会改变坐标轴向 */
            /* 多重转换:以第一种旋转形态得坐标轴为准 */
            /* transform: rotate(360de) translate(600px); */
            
            /* 层叠性 */
            /* transform: translate(600px); */
            /* transform: rotate(360deg); */
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="./images/tyre.png" alt="">
    </div>
</body>

4：skew(angle);默认原点倾斜

skewX(angle)：倾斜元素沿 x 轴
skewY(angle)：倾斜元素沿 y 轴
skew(angle);默认原点倾斜

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倾斜效果</title>
    <style>
        div{
            margin: 0 auto;
            width: 100px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }

        div:hover{

            transform: skew(30deg);    
        }
    </style>
</head>

这个transform CSS属性，是一个混合属性:

transform: translate(800px) rotate(360deg) scale(2) skew(180deg);

在一个标签中，要回合写在一起，同时顺序不同效果也会不同。