旋转的正方体

最新推荐文章于 2023-01-07 10:32:10 发布

z_l_ming

最新推荐文章于 2023-01-07 10:32:10 发布

阅读量609

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/z_l_ming/article/details/51755187

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>congradulation</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            background: black;
        }
        #container {
          width: 100%;
          height: 700px;
          -webkit-perspective: 800; 
          -webkit-perspective-origin: 50% 225px;
        }
        #shape {
          position: relative;
          top: 160px;
          margin: 0 auto;
          height: 200px;
          width: 200px;
          -webkit-transform-style: preserve-3d;
        }
        #shape.backfaces .plane {
            -webkit-backface-visibility: visible;
        }
        .plane{
            z-index: 9999;
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid white;
            text-align: center;
            font-family: Times, serif;
            font-size: 96px;
            line-height: 200px;
            color: black;
            background-color: rgba(239, 222, 221, 0.6);
        }
        .cube>.one{
            opacity: 0.5;
            -webkit-transform:scale3d(1.2,1.2,1.2) rotateX(90deg) translateZ(100px);
        }
        .cube>.two{
            opacity: 0.5;
            -webkit-transform:scale3d(1.2,1.2,1.2)  translateZ(100px);
        }
        .cube>.three{
            opacity: 0.5;
            -webkit-transform:scale3d(1.2,1.2,1.2) rotateY(90deg) translateZ(100px);
        }
        .cube>.four{
            opacity: 0.5;
            -webkit-transform:scale3d(1.2,1.2,1.2) rotateY(180deg) translateZ(100px) ;
        }
        .cube>.five{
            opacity: 0.5;
            -webkit-transform:scale3d(1.2,1.2,1.2)  rotateY(-90deg) translateZ(100px);
        }
        .cube>.six{
            opacity: 0.5;
            -webkit-transform:scale3d(1.2,1.2,1.2) rotateX(-90deg)  translateZ(100px);
        }
        .cube>.seven{
            -webkit-transform:scale3d(0.8,0.8,0.8) rotateX(90deg) translateZ(100px);
        }
        .cube>.eight{
            opacity: 0.5;
            -webkit-transform:scale3d(0.8,0.8,0.8)  translateZ(100px);
        }
        .cube>.nine{
            opacity: 0.5;
            -webkit-transform:scale3d(0.8,0.8,0.8) rotateY(90deg) translateZ(100px);
        }
        .cube>.ten{
            opacity: 0.5;
            -webkit-transform:scale3d(0.8,0.8,0.8) rotateY(180deg) translateZ(100px) ;
        }
        .cube>.eleven{
            opacity: 0.5;
            -webkit-transform:scale3d(0.8,0.8,0.8)  rotateY(-90deg) translateZ(100px);
        }
        .cube>.twelve{
            opacity: 0.5;
            -webkit-transform:scale3d(0.8,0.8,0.8) rotateX(-90deg)  translateZ(100px);
        }
        #shape {
          -webkit-animation: spin 10s infinite linear;
        }
         @-webkit-keyframes spin {
          from { -webkit-transform: rotate3d(0,0,0,0deg); }
          to   { -webkit-transform: rotate3d(-1,1,0,-360deg); }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="shape" class="cube backfaces">
            <div class="plane one">祝</div>
            <div class="plane two">贺</div>
            <div class="plane three">骑</div>
            <div class="plane four">士</div>
            <div class="plane five">夺</div>
            <div class="plane six">冠</div>
            <div class="plane seven">骑</div>
            <div class="plane eight">士</div>
            <div class="plane nine">精</div>
            <div class="plane ten">神</div>
            <div class="plane eleven">可</div>
            <div class="plane twelve">嘉</div>
        </div>
    </div>
</body>
</html>