CSS3：2D转换transform之旋转与缩放

最新推荐文章于 2023-10-30 09:10:50 发布

独憩

最新推荐文章于 2023-10-30 09:10:50 发布

阅读量459

点赞数 1

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

本文链接：https://blog.csdn.net/qq_54517101/article/details/126305374

版权

前端专栏收录该内容

53 篇文章 5 订阅

订阅专栏

旋转

正的为顺时针负的为逆时针单位是度数

transform: rotate(90deg);

也可以定义旋转中心：可以简单定义到左上角等，也可以写具体的像素大小

transform-origin:left bottom;

案例：

    <style>
        .one{
            overflow: hidden;
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 100px auto;



        }
        .one::before{
            content: "heima";
            display:block;
            width: 100%;
            height:  100%;
            background-color: aqua;

            transform: rotate(90deg);
            transform-origin:left bottom;
            transition: 0.3s;

        }   
        .one:hover::before{
            transform: rotate(0deg);
        }


    </style>
</head>
<body>
    <div class="one">
    </div>


</body>

缩放

transform: scale(1.1，1.1);

表示高和宽都变为原来的1.1倍，如果只写一个参数默认宽高同时缩放

也可以定义缩放中心，与旋转的做法是一样的

案例，鼠标放上去自动放大：

    <style>
        .one{
            overflow: hidden;
            width: 592px;
            height: 440px;
            background-color: red;
            margin: 100px auto;



        }
        img{
            transition: .4s;
        }
        .one:hover img{
            transform: scale(1.1);
        }
        


    </style>
</head>
<body>
    <div class="one">
        <img src="images/img.jpg" alt="">
    </div>


</body>