旋转木马（案例）附图片素材

最新推荐文章于 2024-01-03 13:48:33 发布

fusheng_cn

最新推荐文章于 2024-01-03 13:48:33 发布

阅读量670

点赞数 1

分类专栏： css3 文章标签： css3 动画

本文链接：https://blog.csdn.net/fusheng_cn/article/details/124283042

版权

该博客分享了一个使用CSS3实现的3D旋转木马动画案例，图片在围绕Y轴旋转，当鼠标悬停在图片上时，动画暂停，移开鼠标后动画继续执行。

摘要由CSDN通过智能技术生成

图片素材是自己找的，此案例效果为：图片围绕3D中的Y轴进行旋转，鼠标移动至图片，停止动画，鼠标离开，继续动画。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        perspective: 1000px;
      }
      section {
        position: relative;
        width: 300px;
        height: 200px;
        margin: 150px auto;
        transform-style: preserve-3d;
        /* 添加动画效果 */