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

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
        <title>CSS3 3D旋转立方体</title>
        <style>
            body{
                margin:0;
                padding:0;
            }
    
            .cube{
                 800px;
                height: 400px;
                /*
                    perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变
                    3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素
                    会获得透视效果,而不是元素本身。
                    注释:perspective 属性只影响 3D 转换元素。
                */
                -webkit-perspective: 1000px;
                margin:200px auto 0 auto;
            }
    
            .ant{
                 100%;
                height: 100%;
                /*
                    transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
                    flat 	        子元素将不保留其 3D 位置。
                    preserve-3d 	子元素将保留其 3D 位置。
                    注释:该属性必须与 transform 属性一同使用。
                */
                -webkit-transform-style: preserve-3d;
                /*
                    translate3d(x,y,z) 	定义 3D 转换。
                    rotateY(angle) 	定义沿着 Y 轴的 3D 旋转。
                */
                -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
                -webkit-animation:xuanzhuan 5s infinite linear;
            }
    
            .face{
                 100%;
                height: 100%;
                position: absolute;
                border:1px solid;
                -webkit-backface-visibility: visible;
                overflow: hidden;
                z-index: 10;
                text-align: center;
                font-size: 50px;
            }
    
            .face span {
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }
    
            .face-right{
                -webkit-transform: translate3d(400px , 0 , 0px) rotateY(-90deg);
            }
            .face-left{
                -webkit-transform: translate3d(-400px , 0 , 0px) rotateY(90deg);
            }
            .face-in{
                -webkit-transform: translate3d(0px , 0 , -400px) rotateY(0deg);
            }
            .face-out{
                -webkit-transform: translate3d(0px , 0 , 400px) rotateY(180deg);
            }
            .face-bottom{
                height: 800px;
                -webkit-transform: translate3d(0px , 0px , 0px) rotateX(90deg);
            }
            .face-top{
                height: 800px;
                -webkit-transform: translate3d(0px , -400px , 0px) rotateX(-90deg);
            }
    
            @-webkit-keyframes xuanzhuan{
                from{
                    -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
                }
                to{
                    -webkit-transform: translate3d(0,0,-200px) rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
    <div class="cube">
        <div class="ant">
            <div class="face face-right"><span></span>1</div>
            <div class="face face-left"><span></span>2</div>
            <div class="face face-in"><span></span>3</div>
            <div class="face face-out"><span></span>4</div>
            <div class="face face-bottom"><span></span>5</div>
            <div class="face face-top"><span></span>6</div>
        </div>
    </div>
    </body>
    </html>





  • 相关阅读:
    leetcode: power of three 三种解法
    继续写java和socket
    node中的事件发射器
    谈一谈Crsf和XSS攻击
    谈一谈那些框架们
    【Mysql数据库】学习笔记
    【数据库】DML-增删改查-SQL实现
    【Jsp,Servlet初学总结】 含 cookie和session的使用
    struct和typedef struct彻底明白了
    Android 学习之路
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924954.html
Copyright © 2011-2022 走看看