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>