CSS3动画实现立方体 - [例子]

最新推荐文章于 2020-09-13 16:29:35 发布

路克森

最新推荐文章于 2020-09-13 16:29:35 发布

阅读量355

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_39057639/article/details/102983185

版权

博主个人教程

下面是实现代码通过CSS3的3D转换来实现一个立方体DEMO


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      color: white;
      padding: 150px;
      background: rgb(60, 60, 60);
    }

    .container {
      position: relative;
      width: 200px;
      height: 200px;
      transition: 0.5s;
      transform-style: preserve-3d;
    }

    .container div {
      position: absolute;
      border: 1px solid white;
      top: 0;
      width: 200px;
      height: 200px;
    }

    .container div img {
      width: 100%;
      height: 100%;
    }

    .container .top {
      transform: rotateX(90deg) translateZ(100px);
    }

    .container .bottom {
      transform: rotateX(-90deg) translateZ(100px);
    }

    .container .left {
      transform: rotateY(-90deg) translateZ(100px);
    }

    .container .right {
      transform: rotateY(90deg) rotateX(0deg) translateZ(100px);
    }

    .container .front {
      transform: rotateY(0deg) translateZ(100px);
    }

    .container .after {
      transform: rotateY(180deg) translateZ(100px);
    }

    .c_top:checked ~ .container {
      transform: rotateX(-90deg);
    }
    .c_bottom:checked ~ .container {
      transform: rotateX(90deg);
    }
    .c_left:checked ~ .container {
      transform: rotateY(90deg);
    }
    .c_right:checked ~ .container {
      transform: rotateY(-90deg);
    }
    .c_front:checked ~ .container {
      transform: rotateX(0deg);
    }
    .c_after:checked ~ .container {
      transform: rotateY(-180deg);
    }
  </style>
  <body>
    <input type="radio" name="c" class="c_top" /> top
    <input type="radio" name="c" class="c_bottom" /> bottom
    <input type="radio" name="c" class="c_front" /> front
    <input type="radio" name="c" class="c_after" /> after
    <input type="radio" name="c" class="c_left" /> left
    <input type="radio" name="c" class="c_right" /> right <br />
    <br />
    <br />
    <br />
    <br />
    <div class="container">
      <div class="top">
        <img
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2967613618,689336435&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="bottom">
        <img
          src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3010015630,3017077777&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="left">
        <img
          src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3010015630,3017077777&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="right">
        <img
          src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3010015630,3017077777&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="front">
        <img
          src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4190671957,611176633&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="after">
        <img
          src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=499219047,2605789247&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
    </div>
  </body>
</html>