css3 - 3d效果立方体

Posted 2020-08-05 常想一二

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 - 3d效果立方体相关的知识，希望对你有一定的参考价值。

1. 立方体的上下：

        .cubeBottom{

            transform: rotateX(90deg) ;
            transform-origin:center bottom  ; /* :绕x旋转，主要确定y的高度 ： right bottom , 1px  300px, 2px  300px,.. 100px 300px .. */
        }

　　 2. 立方体的左右：

        .cubeLeft{
            transform: rotateY(90deg) ;
            transform-origin:left center  ; /* :绕Y旋转，主要确定x  ： left bottom , left  300px, 0  300px,..0 500px .. */
        }

3. 立方体的前后：

     .cubeFront{
            transform:translateZ(0px);
        }
        .cubeBack{
            transform:translateZ(-300px);
        }

4 立方体实现：注意

/*  透视中心和透视距离*/
perspective-origin:  0 1000px ;
perspective: 2000px;

/*  效果： 平面还是3d立体 */
transform-style: preserve-3d;



源代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3d </title>
    <style>
        .con{ position: relative;
            width: 80%;
            height: 900px;
            margin: 0 auto;
            perspective-origin:  0 1000px ;
            perspective: 2000px;

        }
        .cubeBox{position: relative;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            /* 效果： 平面还是3d立体 */
            transform-style: preserve-3d;
        }
        .cube{ position:absolute  ;
            left: 50%;
            margin-left: -151px;
            width: 300px;
            height: 300px;
            line-height: 300px;
            border: 1px dotted black;
            text-indent:-9999px ;
            font-size: 56px;
            text-align: center;

        }
        .cube{
            backface-visibility: visible;

        }
        .cubeBottom{

            transform: rotateX(90deg) ;
            transform-origin:center bottom  ; /* :绕x旋转，主要确定y的高度 ： right bottom , 1px  300px, 2px  300px,.. 100px 300px .. */
        }
        .cubeTop{
            transform: rotateX(-90deg) ;
            transform-origin:center top ;/* :绕x旋转，主要确定y的高度 ：right top , center top ,1px 0px, 2px  0px,.. 100px 0px .. */
        }
        .cubeLeft{
            transform: rotateY(90deg) ;
            transform-origin:left center  ; /* :绕Y旋转，主要确定x  ： left bottom , left  300px, 0  300px,..0 500px .. */
        }
        .cubeRight{
            transform: rotateY(-90deg) ;
            transform-origin:right center ;/* :绕Y旋转，主要确定x ：right top , right 0 ,300px 100px, 300px  200px,.. 300px 0px .. */
        }


        .cubeFront{
            transform:translateZ(0px);
        }
        .cubeBack{
            transform:translateZ(-300px);
        }
    </style>
</head>
<body>
<div class="con">
    <div class="cubeBox">
        <div class="cube cubeBack">back</div>
        <div class="cube cubeBottom">Bottom</div>
        <div class="cube cubeTop">Top</div>
        <div class="cube cubeLeft">Left</div>
        <div class="cube cubeRight">Right</div>
        <div class="cube cubeFront">front</div>
    </div>

</div>

</body>
</html>

　5 立方体实现-动画实现立方体

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3d </title>
    <style>
        .con{ position: relative;
            width: 80%;
            height: 900px;
            margin: 0 auto;
            perspective-origin:  0 1000px ;
            perspective: 2000px;

        }
        .cubeBox{position: relative;
            width: 300px;
            height: 300px;
            margin: 0 auto;
            /* 效果： 平面还是3d立体 */
            transform-style: preserve-3d;
        }
        .cube{ position:absolute  ;
            left: 50%;
            margin-left: -151px;
            width: 300px;
            height: 300px;
            line-height: 300px;
            border: 1px dotted black;
            text-indent:-9999px ;
            font-size: 56px;
            text-align: center;

        }
        .cube{
            backface-visibility: visible;

        }
        .cubeBottom{
            animation: KF_cubeBottom 2s  ease 1s both  ;
            transform-origin:center bottom  ; /* :绕x旋转，确定y的高度 ： right bottom , 1px  300px, 2px  300px,.. 100px 300px .. */
        }
        .cubeTop{
            animation: KF_cubeTop 2s  ease 3s both ;
            transform-origin:center top ;/* :绕x旋转，确定y的高度 ：right top , center top ,1px 0px, 2px  0px,.. 100px 0px .. */
        }
        .cubeLeft{
            animation: KF_cubeLeft 2s  ease 5s both ;
            transform-origin:left center  ; /* :绕Y旋转，确定x  ： left bottom , left  300px, 0  300px,..0 500px .. */
        }
        .cubeRight{
            animation: KF_cubeRight 2s  ease 7s both ;
            transform-origin:right center ;/* :绕Y旋转，确定x ：right top , right 0 ,300px 100px, 300px  200px,.. 300px 0px .. */
        }

        .cubeFront{
            animation: KF_cubeFront 2s  ease 9s both ;
            transform:translateZ(0px);
        }
        .cubeBack{
            animation: KF_cubeBack 2s  ease 0s both ;
            transform:translateZ(-300px);
        }

 
        @keyframes   KF_cubeBottom{
            0%{ transform:none;  background: none; }
            100%{
                text-indent:0px ;
                background: rgba(0,0,0,0.3);
                transform: rotateX(90deg) ;
            }
        }

        @keyframes   KF_cubeTop{
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform: rotateX(-90deg) ;
            }
        }

        @keyframes   KF_cubeLeft{
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform: rotateY(90deg) ;
            }
        }
        @keyframes   KF_cubeRight{
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform: rotateY(-90deg) ;
            }
        }

        @keyframes KF_cubeBack  {
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform:translateZ(0px);
            }
        }
        @keyframes KF_cubeFront  {
            0%{ transform:none; }
            100%{
                text-indent:0px ;
                transform:translateZ(-300px);
            }
        }

    </style>
</head>
<body>
<div class="con">
    <div class="cubeBox">
        <div class="cube cubeBack">back</div>
        <div class="cube cubeBottom">Bottom</div>
        <div class="cube cubeTop">Top</div>
        <div class="cube cubeLeft">Left</div>
        <div class="cube cubeRight">Right</div>
        <div class="cube cubeFront">front</div>
    </div>

</div>

</body>
</html>

以上是关于css3 - 3d效果立方体的主要内容，如果未能解决你的问题，请参考以下文章