CSS3d 基础

Posted 2020-08-01 浅唱年华1920

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3d 基础相关的知识，希望对你有一定的参考价值。

-webkit-transform-style:-webkit-preserve-3d;//设置3D转换

translateX:px; 平移
translateY:px;
translateZ:px;

rotateX:deg; 旋转
rotateY:deg;
rotateZ:deg;

transform-origin://旋转中心

X轴    left   center    right

Y轴    top   center    bottom

Z轴    length px

三维属性
-webkit-perspective:800;  表示Z轴距离，浏览器距离3D物体的距离
-webkit-perspective-origin:50% 50%;表示浏览器正中心看过去

<style type="text/css">
            *{margin:0px;padding:0px;}
            ul{list-style:none;}
            #test{
                margin-top: 100px;
                -webkit-perspective:800; 
                perspective:800; 
                -webkit-perspective-origin: 50% 50%;
                perspective-origin: 50% 50%;
                overflow: hidden;
            }
            .block{
                position:relative;
                height:300px;
                width: 300px;
                margin:0px auto;
                -webkit-transform-style: preserve-3d;/* 设置其子元素的3D属性*/
                transform-style: preserve-3d;
            }
            .block li{
                height:100%;
                width:100%;
                background-color: #000;
                color:#FFF;
                position:absolute;
                line-height:100%;
                font-size:300px;
                text-align:center;
                -webkit-transition:-webkit-transform 1s linear;
                transition:transform 1s linear;
                -webkit-transform-origin:bottom;
                transform-origin:bottom;
            }
            #test2,#test3,#test4,#test5,#test6{
                -webkit-transform: rotateX(90deg);
                transform: rotateX(90deg);
            }
        </style>
    </head>
    <body>
        <!--创建3D场景-->
        <div id="test">
            <!--内容-->
            <ul class="block">
                <li id=\'test1\'>1</li>
                <li id=\'test2\'>2</li>
                <li id=\'test3\'>3</li>
                <li id=\'test4\'>4</li>
                <li id=\'test5\'>5</li>
                <li id=\'test6\'>6</li>
            </ul>    
        </div>
        <div class="btn" style="width:300px;margin:0 auto;text-align:center;">
            <a href="javascript:prev()">prev</a> <a href="javascript:next()">next</a>
        </div>
    </body>
    <script type="text/javascript">
        var clearIndex = 1;
        function next(){
            if(clearIndex==6){
                return;
            }
            var currentIndex = document.getElementById(\'test\'+clearIndex);
            currentIndex.style.transform = \'rotateX(-90deg)\';
            currentIndex.style.webkitTransform = \'rotateX(-90deg)\';
            clearIndex++;
            var nextIndex = document.getElementById(\'test\'+clearIndex);
            nextIndex.style.transform = \'rotateX(0deg)\';
            nextIndex.style.webkitTransform = \'rotateX(0deg)\';
        }
        function prev(){
            if(clearIndex==1){
                return;
            }
            var currentIndex = document.getElementById(\'test\'+clearIndex);
            currentIndex.style.transform = \'rotateX(90deg)\';
            currentIndex.style.webkitTransform = \'rotateX(90deg)\';
            clearIndex--;
            var prevIndex = document.getElementById(\'test\'+clearIndex);
            prevIndex.style.transform = \'rotateX(0deg)\';
            prevIndex.style.webkitTransform = \'rotateX(0deg)\';
        }
    </script>

3D翻页效果

以上是关于CSS3d 基础的主要内容，如果未能解决你的问题，请参考以下文章

CSS3D 矩阵生成

three.js css3d 如何更新数据