css实现3D旋转木马

最新推荐文章于 2024-05-05 04:04:04 发布

yjwlike

最新推荐文章于 2024-05-05 04:04:04 发布

阅读量394

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 3d css3

本文链接：https://blog.csdn.net/m0_58239318/article/details/122504338

先看效果图 :

实现源码:

<!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;
      background: #000;
    }

    @keyframes rot {
      0% {}

      100% {
        transform: rotate3d(0, 1, 0, 360deg);
      }
    }

    .fat {
      margin: 200px auto;
      width: 300px;
      height: 200px;
      transform-style: preserve-3d;
      transform: rotateX(-30deg);
    }

    .box {
      position: relative;
      width: 300px;
      height: 200px;
      margin: 200px auto;

      transform-style: preserve-3d;
      animation: rot 6s li