变形 transform（2D）

最新推荐文章于 2024-07-18 18:43:34 发布

后来199

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量90

点赞数 1

文章标签： css3 前端 html5 javascript firefox Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_68665257/article/details/129369986

版权

变形可以改变盒子在平面内的形态（位移、旋转、缩放,倾斜等等）

translate(位移)0可以让盒子沿着x轴或者y轴来移动。

语法
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

他和margin有啥区别。

margin移动盒子会影响其余的盒子。把其他人挤走。

位移translate移动盒子不会影响其他的盒子。不脱标。

位移经常需要的场景：

比如盒子上下移动不影响其他盒子

盒子水平和垂直居中，写法简单

轮播图的动画效果

注意：
移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

案例 
<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box1{
            /* 外边距移动的百分比是父盒子的大小,在移动时会影响其他的盒子 */
            /* margin-left: 100%; */
            margin-top: 10px;

        }
        .box2{
            background-color: green;
            /* 2.位移移动的百分比是自己的大小,x轴是自己的宽,y轴是自己的高 */
            /* transform: translate(100%,0); */
            /* 位移在移动时不会影响其他的盒子,有类似于相当于相对定位的特点 */
            transform: translateY(10px);
        }
    </style>

盒子居中的三种方法

案例
<style>
     .father{
        position: relative;
        width: 200px;
        height: 200px;
        background-color: pink;
     }
     /* 盒子居中解决方法一:定位+margin */
     .son{
        position: absolute;
        left: 100px;
        top: 100px;
        margin-left: -50px;
        margin-top: -50px;
        width: 100px;
        height: 100px;
        background-color: green;
    }

    /* 盒子居中解决方法二:定位+位移transform: translate: ; */
     .son{ 
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background-color: green;
    }
    /* 盒子居中解决方法三:父相子绝+margin:auto */
    .son{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: #fff;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

旋转 rotate

旋转可以让盒子旋转角度。

语法:
transform: rotate(45deg);    一定写单位

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

案例
 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
        .box img{
            width: 100%;
            transition: all 2s;
        }
        /* 需求:鼠标移入盒子需要让图片进行旋转 */
        .box:hover img{
            /* 旋转 */
            /* 语法:transform:rotate(角度); deg度数  turn圈 */
            /* 正值是顺时针   负值是逆时针 */
            /* transform:rotate(360deg); */
            transform: rotate(2turn);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/rotate.png" alt="">
    </div>
</body>
</html>

设置中心点 transform-origin

/* 设置旋转的中心点位置 */

transform-origin:方位名词top, left, right,bottom;

多形态变形小技巧

如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。

transform: translate(-50%, -50%) rotate(360deg);

注意，多个值之前用空格隔开。

缩放 scale

语法：
transform: scale(1.5)；

它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子。

 案例
<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            /* 语法: transform:scale:(水平缩放,垂直缩放) ; */
            /* 一般我们只设置一个值,值的取值不带单位,倍数 */
            /* transform:scale(2,1.5); */
            transition: all 1s;
            overflow: hidden;
        }
        img{
            width: 200px;
            height: 200px;
            transition: all 1s;
        }
        .box:hover img{
            /* 宽和高等比例缩放2倍 */
            /* transform:scale(2); */
            /* 1倍就是不变 */
            /* transform: scale(1); */
            /* 1倍以下是缩小 */
            /* transform: scale(0.5); */
            /* 负值  值小于-1是缩放  值大于-1是放大 */
            transform: scale(1.2);
        }


        /* 需求:在不改变宽高情况下让盒子增大 */
        /* 解决方法:内边距+边框 */
        /* 需求:在不改变宽高情况下同时不设置盒子模型情况下让盒子增大? */
        /* 解决方法:2d缩放 */
        /* 注意点:缩放可以取负值缩小,缩放的倍数为1表示不变,1倍以下是缩小,1倍以上是放大 */
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/2.jpg" alt="">
    </div>
</body>
</html>

倾斜skew

案例
<style>
            .box{
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 200px auto;
                /* 需求:正方形盒子变成平行四边形 */
                /* 解决:2d倾斜 */
                /* 语法:transform: skew(deg); */
                /* 注意点:角度不能为直角90deg */

                /* 正值是向右,负值向左 */
                /* transform: skew(-60deg); */

                /* 倾斜单独写法, skewX水平倾斜  skewY垂直倾斜 */
                /* transform:skewX(91deg); */
        </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>