美文网首页
旋转的正方体

旋转的正方体

作者: CHEN_Erhui | 来源:发表于2017-06-10 09:33 被阅读0次
效果图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            width: 400px;
            height: 400px;
            text-align: center;
            line-height: 400px;
            font-size: 60px;
        }
        .container{

            position: relative;
            border: 1px dashed #000;
            margin: 200px auto;
            transform: rotateY(30deg) rotateX(30deg);
            transform-style: preserve-3d;
            animation: 10s linear 0s infinite reverse my_rotate;
        }
        .container div{
            position: absolute;
        }
        .font{
            background-color: rgba(100, 100, 100, 1);
            transform: translateZ(200px);
        }
        .back{
            background-color: rgba(80, 255, 133, 1);
            transform: rotateY(180deg) translateZ(200px);
        }
        .left{
            background-color: rgba(255, 57, 56, 1);
            transform: rotateY(-90deg) translateZ(200px);
        }
        .right{
            background-color: rgba(25, 37, 170, 1);
            transform: rotateY(90deg) translateZ(200px);
        }
        .up{
            background-color: rgba(232, 255, 204, 1);
            transform: rotateX(90deg) translateZ(200px);
        }
        .down{
            background-color: rgba(94, 255, 56, 1);
            transform: rotateX(-90deg) translateZ(200px);
        }
        @keyframes my_rotate {
            from{
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="font">前</div>
    <div class="back">后</div>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="up">上</div>
    <div class="down">下</div>
</div>
</body>
</html>

相关文章

  • 正方体旋转css简单实现

    正方体旋转 简单css实现

  • 旋转的正方体

  • 正方体全景图

    正方体全景图是把一个全景图切成 6 张图片分别贴到一个正方体的 6 个面上。相机放在正方体中间,旋转时改变相机的指...

  • 旋转正方体

    想来大家在初学前端之处,也很好奇,那些炫酷的特效真的可以由自己编写出来嘛,其实是的,现在我来分享一个旋转的正方体。...

  • OpenGL ES案例02 - 加载正方体

    案例要求:使用GLKit 加载一个带纹理的正方体,并让该正方体有个旋转的效果。效果图如下: 要完成这个效果,主要思...

  • OpenGL ES学习:渲染正方体并旋转

    今天我们通过OpenGL ES来绘制一个正方体,并实现正方体的旋转。具体效果如下 具体实现可以分为四个部分: se...

  • OpenGL ES案例- 用OpenGL ES 和CoreAni

    上一篇中我们实现了显示一个图片。这次我们增加点难度,创建一个正方体,将正方体6个面全都贴上纹理并且使其进行旋转。 ...

  • webgl 24.为旋转平移后的正方体添加光照

    接上节的例子,我们对正方体做一些模型变换(旋转、平移、缩放)后再添加光照。 物体旋转、平移或缩放后法向量会发生变化...

  • OpenGL ES: GLKit实现正方体旋转

    实现正方体旋转分为4个步骤: OpenGL 初始化, 加载纹理 设置定时器 GLKViewDelegate函数绘制...

  • GLKit-绘制旋转的正方体

    本案例实现一个旋转的正方体,最终实现效果如下 整个流程主要分为五部分: setupConfig:主要进行初始化的工...

网友评论

      本文标题:旋转的正方体

      本文链接:https://www.haomeiwen.com/subject/usyqqxtx.html