黑马程序员技术交流社区

标题: 【成都校区】前端 [打印本页]

作者: 海上月 时间: 2019-9-25 19:15
标题: 【成都校区】前端
今日动漫魔方！
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
      body {
         perspective: 1000px;
      }

      img {
         width: 300px;
         height: 300px;
         vertical-align: top;
      }

      section {
         position: relative;
         margin: 200px auto;
         width: 200px;
         height: 300px;
         transform-style: preserve-3d;
         animation: m1 8s linear infinite;
      }

      section:hover {
         animation-play-state: paused;
      }

      div {
         position: absolute;
         top: 0;
         left: 0;
      }

      section div:first-child {
         transform: translateZ(150px);
      }

      section div:nth-child(2) {
         transform: rotateY(90deg) translateZ(150px);
      }

      section div:nth-child(3) {
         transform: rotateY(180deg) translateZ(150px);
      }

      section div:nth-child(4) {
         transform: rotateY(270deg) translateZ(150px);
      }

      section div:nth-child(5) {
         transform: rotateX(90deg) translateZ(150px);
      }

      section div:nth-child(6) {
         transform: rotateX(90deg) translateZ(-150px);
      }

      @keyframes m1 {
         0% {}
         100% {
            transform: rotate3d(1, 1, 1, 360deg);
         }
      }
</style>

</head>

<body>
<section class="box">
      <div><img src="../../../../图/006Zw1yCly1g79n6nbo2kj30hx0nfwfv.jpg" alt=""></div>
      <div><img src="../../../../图/006Zw1yCly1g79n6ncgmej30mc0mjdii.jpg" alt=""></div>
      <div><img src="../../../../图/006Zw1yCly1g79n6npz25j30hw0ncacc.jpg" alt=""></div>
      <div><img src="../../../../图/006Zw1yCly1g79n6o5t8dj30hb0qeac0.jpg" alt=""></div>
      <div><img src="../../../../图/006Zw1yCly1g79n6oczs0j30i80p3779.jpg" alt=""></div>
      <div><img src="../../../../图/006Zw1yCly1g79n6ome56j30l90rsadv.jpg" alt=""></div>
</section>
</body>

</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2