CSS3实现的旋转动画产品列表图特效源码

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-27 16:27:53

CSS3 实现旋转动画产品列表图特效源码详解

理解 CSS3 旋转动画

CSS3 提供了强大的 transform 属性，其中 rotate() 函数可以实现元素的旋转效果。通过结合 transition 或 animation 属性，我们可以创建出平滑的旋转动画。

实现步骤

HTML 结构:

HTML

<div class="product-list">
    <div class="product">
        <img src="product1.jpg" alt="产品1">
    </div>
    <div class="product">
        <img src="product2.jpg" alt="产品2">
    </div>
    </div>

CSS 样式:

CSS

.product {
    width: 200px;
    height: 200px;
    overflow: hidden;
    perspective: 800px; /* 创建 3D 空间 */
}

.product img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s; /* 设置过渡效果 */
}

.product:hover img {
    transform: rotateY(180deg); /* 鼠标悬停时旋转 180 度 */
}

代码解读

perspective属性: 创建一个 3D 空间，使旋转效果更立体。
transition属性: 设置过渡效果，让旋转动画更加平滑。
transform: rotateY(180deg): 使图片绕 Y 轴旋转 180 度。

完整示例

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 旋转动画</title>
    <style>
        /* CSS样式同上 */
    </style>
</head>
<body>
    <div class="product-list">
        </div>
</body>
</html>