旋转，放大，移动

最新推荐文章于 2024-06-12 12:52:53 发布

cc&

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量108

点赞数 3

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

本文链接：https://blog.csdn.net/grow_/article/details/137586894

版权

HTML5 CSS3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1000px;
            height: 580px;
            margin: 50px auto;
            border: 1px solid green;
            position: relative;
        }

        .top {
            margin: 0 auto 130px;
            padding: 10px 0;
            background: orange;
            color: #fff;
        }

        .itemBox {
            width: 120px;
            height: 120px;
            line-height: 120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color: #fff;
            cursor: pointer;
        }

        /*效果一：360°旋转 修改rotate(旋转度数)*/
        .img1 {
            transition: All 0.4s ease-in-out;

        }

        .img1:hover {
            transform: rotate(360deg);
        }

        /*效果二：放大 修改scale(放大的值)*/
        .img2 {
            transition: All 0.4s ease-in-out;
        }

        .img2:hover {
            transform: scale(1.2);
        }

        /*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
        .img3 {
            transition: All 0.4s ease-in-out;

        }

        .img3:hover {
            transform: rotate(360deg) scale(1.2);

        }

        /*效果四：上下左右移动 修改translate(x轴,y轴)*/
        .img4 {
            transition: All 0.4s ease-in-out;

        }

        .img4:hover {
            transform: translate(9px, -10px);

        }
    </style>
</head>

<body>
    <div class="container">
        <div class="top">
            <h3>鼠标移上去旋转、放大、移动</h3>
            <div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
        </div>
        <div style="width:640px ; margin:0 auto;">
            <div class="itemBox img1">360°旋转 </div>
            <div class="itemBox img2">放大</div>
            <div class="itemBox img3">旋转放大</div>
            <div class="itemBox img4">上下左右移动 </div>
        </div>

    </div>
</body>

</html>