html 与 css 实现立方体旋转动画 --女神捕获器

最新推荐文章于 2024-07-06 13:17:42 发布

新时代农民工Top

最新推荐文章于 2024-07-06 13:17:42 发布

阅读量243

点赞数

文章标签： css 动画 html

本文链接：https://blog.csdn.net/web00_11/article/details/120374546

版权

女神看了都流泪

在这里插入图片描述

使用 transform: rotate() 旋转 transform: translate() 位移，结合 @keyframes 动画完成简单的立方体旋转动画

<!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>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: black;
      }
      .box {
        width: 300px;
        height: 300px;
        position: relative;
        top: 300px;
        left: 800px;
        transform-style: preserve-3d;
        transform: rotateX(45deg) rotateY(45deg);
        animation: mode 5s linear infinite;
      }
      .son {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .one {
        /* background-color: aquamarine; */
        transform: translateY(50%) rotateX(90deg);
      }
      .two {
        /* background-color: blueviolet; */
        transform: translateY(-50%) rotateX(90deg);
      }
      .three {
        /* background-color: coral; */
        transform: translateX(50%) rotateY(90deg);
      }
      .four {
        /* background-color: darkcyan; */
        transform: translateX(-50%) rotateY(90deg);
      }
      .five {
        /* background-color: darksalmon; */
        transform: translateZ(150px);
      }
      .six {
        /* background-color: darkseagreen; */
        transform: translateZ(-150px);
      }
      img {
        width: 300px;
        height: 300px;
        opacity: 0.8;
      }
      @keyframes mode {
        0% {
          transform: rotateX(0deg) rotateY(0deg);
        }
        100% {
          transform: rotateX(360deg) rotateY(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="son one">1</div>
      <div class="son two">2</div>
      <div class="son three">3</div>
      <div class="son four">4</div>
      <div class="son five">5</div>
      <div class="son six">6</div>
    </div>
  </body>
</html>