鼠标悬停，图片旋转360°特效代码

最新推荐文章于 2023-05-14 17:00:41 发布

原创最新推荐文章于 2023-05-14 17:00:41 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#图片旋转 #html #css #图片 #鼠标

网页特效同时被 2 个专栏收录

17 篇文章

订阅专栏

css运用

14 篇文章

订阅专栏

本文通过HTML和CSS代码展示了如何在鼠标悬停时实现图片360度旋转的特效。详细介绍了html结构和对应的css样式设置，最终呈现出动态的视觉效果。

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

html代码

<div class="picxz"></div>

css代码

* {
    margin:0;
    padding:0;
    list-style:none;
}
body {
    background:#1F1F1F;
}
.picxz {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: no-repeat url("http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg") left top;
    -webkit-background-size: 220px 220px;
    -moz-background-size: 220px 220px;
    background-size: 220px 220px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
}
.picxz:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}