zoukankan      html  css  js  c++  java
  • 旋转3D立方体

    <!DOCTYPE html>
    <html>
    <head>
    <title>css-3d-盒子</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=750, user-scalable=no" />
    <style>
    body {
    margin: 0;
    padding: 0;
    position: absolute;
    100%;
    height: 100%;
    }

    .stage {
    position: absolute;
    left: 0px;
    top: 0px;
    100%;
    height: 100%;
    background: -webkit-radial-gradient(#5f4479,#3c3c3c);
    }

    .css3d {
    position: absolute;
    left: 50%;
    top: 50%;
    200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    transform: rotate(0deg);
    animation: aniTo 5s linear infinite;
    transform-style: preserve-3d;
    }

    .css3d > div {
    position: absolute;
    200px;
    height: 200px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(3, 255, 224, 0.5);
    border-radius: 10%;
    text-align: center;
    line-height: 200px;
    font-size: 100px;
    font-weight: bold;
    color: #FFF;
    }

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

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

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

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

    .qian {
    transform: rotateZ(0deg) translateZ(100px);
    }

    .hou {
    transform: rotateZ(0deg) translateZ(-100px);
    }

    @keyframes aniTo {
    0% {
    transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
    transform: rotateX(360deg) rotateY(360deg);
    }
    }
    </style>
    </head>
    <body>
    <div class="stage">
    <div class="css3d">
    <div class="top">1</div>
    <div class="bottom">2</div>
    <div class="left">3</div>
    <div class="right">4</div>
    <div class="qian">5</div>
    <div class="hou">6</div>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    hdu 1028 Ignatius and the Princess III (n的划分)
    CodeForces
    poj 3254 Corn Fields (状压DP入门)
    HYSBZ 1040 骑士 (基环外向树DP)
    PAT 1071 Speech Patterns (25)
    PAT 1077 Kuchiguse (20)
    PAT 1043 Is It a Binary Search Tree (25)
    PAT 1053 Path of Equal Weight (30)
    c++ 常用标准库
    常见数学问题
  • 原文地址:https://www.cnblogs.com/luckyuns/p/6478651.html
Copyright © 2011-2022 走看看