【html5】transform属性

最新推荐文章于 2024-09-09 23:53:04 发布

evan_qb

最新推荐文章于 2024-09-09 23:53:04 发布

阅读量601

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Evan_QB/article/details/78291881

前端专栏收录该内容

76 篇文章

订阅专栏

本文详细介绍了 CSS 中的 transform 属性及其应用场景。包括缩放(scale)、位移(translate)和旋转(rotate)等效果的具体实现方式，并通过实例展示了如何为 HTML 元素添加这些动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>transform属性</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /*过渡*/
            transition: all 1s;
        }
        .box1:hover{
            /*
                scale: 缩放
                scale(水平放缩比例，垂直放缩比例)；
                大于1：放大
                小于1：缩小
                如果只写一个值等比例缩放
            */
            transform: scale(2,0.5);
        }
        .box2:hover{
            /* translate:(水平位移，垂直位移)；
                正值：向右向下
                负值：向左向上
                如果只写一个值 水平移动
                百分比 ：相对于自身移动
            */
            transform:translate(-50%,-50%);
        }
        .box3:hover{
            /* rotate（角度） 旋转
                正值 顺时针
                赋值：逆时针
            */
            transform: rotate(45deg)
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>