立方体的实现 2

Posted caicaihong

tags:

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--这个是利用的是基点的去旋转效果得到
            把基点放在中间，去旋转就可以得到想要的，如何旋转就要看自己的想象辣
            
        -->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 300px;
                height: 300px;
                border: 1px solid;
                
                perspective: 200px;
                /*transform-style: preserve-3d;*/
            }
            
            #wrap > .box{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 100px;
                height: 100px;
                transition:3s ;
                transform-style: preserve-3d;
                transform-origin: center center -50px; 
            }
            #wrap > .box > div{
                position: absolute;
                width: 100px;
                height: 100px;
                text-align: center;
                font: 50px/100px "微软雅黑";
                background: rgba(123,223,333,.3);
                transform-origin: center center -50px;
                backface-visibility: hidden;
            }
            #wrap > .box > div:nth-child(5){
                transform: rotateX(-90deg);
                
            }
            #wrap > .box > div:nth-child(6){
                transform: rotateX(90deg);
                
            }
            #wrap > .box > div:nth-child(3){
            transform: rotateY(-90deg);
                
            }
            #wrap > .box > div:nth-child(4){
                transform: rotateY(90deg);
            
            }
            #wrap > .box > div:nth-child(2){
                /*transform: translateZ(-100px) rotateZ(180deg);*/
                transform: rotateY(180DEG) rotateZ(180DEG);
                
            }
            #wrap > .box > div:nth-child(1){
            
            }
            
            #wrap:hover .box{
            transform: rotate3d(1,1,1,180deg);
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="box">
                <div>前</div>
                <div>后</div>
                <div>左</div>
                <div>右</div>
                <div>上</div>
                <div>下</div>
            </div>
        </div>
    </body>
</html>

效果图：

技术分享图片

 

以上是关于立方体的实现 2的主要内容，如果未能解决你的问题，请参考以下文章

在片段着色器中使用 textureCube 访问环境贴图失败

WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

如何在渲染之间更改片段着色器颜色？

OpenGL GLFW简单立方体不渲染

使用vue学习three.js之加载和使用纹理-使用CubeCamera创建反光效果，动态环境贴图实现，立方体全景贴图