基本信息
源码名称：H5旋转立方体
源码大小：0.50M
文件格式：.rar
开发语言：CSS
更新时间：2016-08-24
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 3 元　
   源码介绍 

<html>
    <head>
        <title>H5立方</title>
        <meta charset="utf-8">
        <style>
            html{
                height: 100%;   
                background: radial-gradient(circle, #333, #000, #000);  
            }  
            body{
                height: 100%;
                margin: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                perspective: 1500px; 
            }
            main  
            {  
                width: 300px;  
                height: 300px;  
                transform-style: preserve-3d;
                animation: 10s spin linear infinite;
            } 
            main div 
            {  
                position: absolute;  
                width: 100%;  
                height: 100%; 
                background-size: 100%;  
                border: 1px solid black; 
            }  
            .font  
            {  
                background-image: url(1.jpg);
                transform: translateZ(150px);  
            }  
            .back  
            {  
                background-image: url(2.jpg);
                transform: translateZ(-150px);  
            }  
        
            .left  
            {  
                background-image: url(3.jpg);
                transform: rotateY(90deg) translateZ(-150px);  
            }  
            .right  
            {  
                background-image: url(4.jpg);
                transform: rotateY(90deg) translateZ(150px);  
            }  
        
            .top  
            {  
                background-image: url(5.jpg);
                transform: rotateX(90deg) translateZ(-150px);  
            }  
            .bottom  
            {  
                background-image: url(6.jpg);
                transform: rotateX(90deg) translateZ(150px);  
            } 
            
            @keyframes spin  
            {  
                0%  
                {    
                    transform: rotateX(0) rotateY(0);  
                }  
                100%  
                {  
                    transform: rotateX(360deg) rotateY(360deg);  
                }  
            } 
        </style>
    </head>
    <body>
        <main>
            <div class="font"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
        </main>
    </body>
</html>