前言

实现思路

1. HTML结构

<div class="rotate-image-container">
    <img src="your-image.jpg" alt="旋转图片" class="rotate-image">
</div>

2. CSS样式

2.1 基本样式

.rotate-image-container {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.rotate-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 1s ease;
}

2.2 旋转效果

为了实现360度旋转效果，我们需要使用CSS的transform属性和animation属性：

.rotate-image {
    /* ... 其他样式 ... */
    transform: rotateY(0deg);
}

.rotate-image-container:hover .rotate-image {
    transform: rotateY(360deg);
}

3. 动画效果

为了让旋转效果更加平滑，我们可以添加一个简单的动画：

@keyframes rotateAnimation {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

.rotate-image {
    /* ... 其他样式 ... */
    animation: rotateAnimation 2s infinite linear;
}

这个动画会在2秒内从0度旋转到360度，并且会无限循环。

总结