zoukankan      html  css  js  c++  java
  • html5—旋转立方体

    以上立方体是完全参考 https://blog.csdn.net/liuyingshudian/article/details/105249962 完成。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>选装动画</title>
            <style>
                *{box-sizing: border-box;}
                html{
                    background-color: gold;
                }
                body{
                    height: 20em;
                     20em;
                    left: 50%;
                    top: 50%;
                    position: absolute;
                    margin: -10em 0 0 -10em;
                    perspective: 2000px;
                }
                
                #cube{
                    animation: 10s spin linear infinite;
                    transform-style: preserve-3d;
                    position: absolute;
                    height: 100%;
                     100%;
                }
                #cube *{
                    height: 20em;
                    20em;
                    background-color: rgba(0,0,0,0.6);
                    position: absolute;
                    border:15px solid rosybrown;
                }
                @keyframes spin{
                    from{transfrom:rotateX(0deg) rotateY(0deg);}
                    to{transform: rotateX(360deg) rotateY(360deg);}
                }
                
                #front{transform: rotateY(0deg) translateZ(10em);}
                #left{transform: rotateY(90deg) translateZ(-10em);}
                #right{transform: rotateY(90deg) translateZ(10em);}
                #top{transform: rotateX(90deg) translateZ(10em);}
                #bottom{transform: rotateX(90deg) translateZ(-10em);}
                #back{transform: rotateY(0deg) translateZ(-10em);}
            </style>
        </head>
        
        <body>
            <div id="cube">
                <div id="front"></div>
                 <div id="left"></div>
                 <div id="right"></div>
                 <div id="top"></div>
                 <div id="bottom"></div>
                 <div id="back"></div>
            </div>
        </body>
    </html>
    
    

    放右上角一个试验一下,不知道是否要根据浏览器写不同的CSS?

  • 相关阅读:
    C语言I博客作业06
    C语言I博客作业05
    C语言I博客作业04
    C语言II博客作业04
    C语言II博客作业03
    C语言II博客作业02
    C语言II博客作业01
    期末总结
    第一次作业
    C语言I博客作业08
  • 原文地址:https://www.cnblogs.com/zzzketi/p/13346023.html
Copyright © 2011-2022 走看看