zoukankan      html  css  js  c++  java
  • css 3D

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>3D立方体</title>
    <style type="text/css">
    <style>
        .stage {}
        .box {
            position: relative;margin: 200px;
            -webkit-transform-style:preserve-3d;
            /*-webkit-perspective:400px;*/
            /*-webkit-transform: rotateZ(45deg);*/
        }
        .box a {display: block;position: absolute;width: 200px; height: 200px; font-size: 188px; text-align: center; vertical-align: middle;border: 1px solid #789; text-decoration: none;
            /*-webkit-backface-visibility:hidden;*/
            background: rgba(200,220,0,.5);
        }
        .box a:nth-child(1) {-webkit-transform: rotateX(0deg) translateZ(100px)}
        .box a:nth-child(2) {-webkit-transform: rotateX(0deg) translateZ(-100px)}
        .box a:nth-child(3) {-webkit-transform: rotateX(-90deg) translateZ(100px)}
        .box a:nth-child(4) {-webkit-transform: rotateX(90deg) translateZ(100px)}
        .box a:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(100px)}
        .box a:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(100px)}
        .box{-webkit-animation:run 5s linear infinite ;}    
        @-webkit-keyframes run{
            0%{-webkit-transform: rotateX(0deg) rotateY(0deg) }
            100%{-webkit-transform:rotateX(360deg)  rotateY(360deg)  }
        }
        </style>
    </head>
    <body>
        <div class="stage">
            <div class="box">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    POJ 1144 Network(割点)
    POJ 3177 Redundant Paths & POJ 3352 Road Construction(双连通分量)
    ASCII码
    数组
    Java语法基础
    eclipse汉化过程
    指针
    面向对象
    第一课JAVA开发环境配置
    初学编写JAVA程序
  • 原文地址:https://www.cnblogs.com/zhoulingfeng/p/4343176.html
Copyright © 2011-2022 走看看