CSS3鼠标悬停图片360度旋转效果

最新推荐文章于 2024-08-30 18:27:39 发布

huxiaoxiao.

最新推荐文章于 2024-08-30 18:27:39 发布

阅读量2.2k

点赞数

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

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121526761

版权

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

布局：

<body>
    <section class="photo">
        <div class="pic pic1"></div>
        <div class="pic pic2"></div>
    </section>
</body>

样式：

<style>
        .photo{
            width: 600px;
            margin: 50px auto 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .photo .pic{
            width: 220px;
            height: 220px;
            background-color: aqua;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100%;
            border-radius: 110px;
            transition: transform 0.5s ease-out;
        }
        .photo .pic:hover{
            /* 变形      rotateZ ，X  ,Y Z轴，X轴，Y轴，三种旋转方向，角度可取负
            度数也可写为turn.    1turn表示一圈
             */
            transform: rotateZ(360deg);
        }
        .pic1{
            background-image: url(./1.jpg);
        }
        .pic2{
            background-image: url(./2.jpg);
        }
    </style>

查看效果：