3D旋转立方体

谁借莪１个温暖的怀抱￠ 2023-10-06 09:11 42阅读 0赞

效果图;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTIxODQ4_size_16_color_FFFFFF_t_70][]

上代码：

<style>
    .wrap {
        width: 120px;
        height: 200px;
        margin: 20px;
        position: fixed;
        top: 150px;
        right: 715px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        z-index: 22;
    }
    
    .cube {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        animation: rotate linear 20s infinite;
    }
    
    @-webkit-keyframes rotate {
        from {
            transform: rotateX(0deg) rotateY(0deg);
        }
        to {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
    
    .cube div {
        position: absolute;
        width: 120px;
        height: 120px;
        opacity: 0.8;
        transition: all .4s;
    }
    
    .cube .out_front {
        transform: rotateY(0deg) translateZ(60px);
    }
    
    .cube .out_back {
        transform: translateZ(-60px) rotateY(180deg);
    }
    
    .cube .out_left {
        transform: rotateY(-90deg) translateZ(60px);
    }
    
    .cube .out_right {
        transform: rotateY(90deg) translateZ(60px);
    }
    
    .cube .out_top {
        transform: rotateX(90deg) translateZ(60px);
    }
    
    .cube .out_bottom {
        transform: rotateX(-90deg) translateZ(60px);
    }
    </style>
    <div class="wrap">
        <div class="cube">
            <div class="out_front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div>
            <div class="out_back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div>
            <div class="out_left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"></div>
            <div class="out_right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"></div>
            <div class="out_top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"></div>
            <div class="out_bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic">
            </div>
        </div>
    </div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTIxODQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520215133513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTIxODQ4,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关实现3D立方体旋转（代码）

D讲解链接：不懂请看下方链接结构代码： [https://blog.csdn.net/l1936441554/article/details/99080122]...

心已赠人/ 2024年04月18日 10:02/ 0 赞/ 88 阅读

相关 3D旋转立方体

效果图; ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

谁借莪１个温暖的怀抱￠/ 2023年10月06日 09:11/ 0 赞/ 43 阅读

相关 JOGL学习（3）—— 旋转彩色立方体

参考链接：[https://iowiki.com/jogl/jogl\_3d\_cube.html][https_iowiki.com_jogl_jogl_3d_cube

刺骨的言语ヽ痛彻心扉/ 2023年07月13日 03:39/ 0 赞/ 29 阅读

相关抖音上非常火的3D立方体旋转，纯CSS实现

一、效果图展示 ![在这里插入图片描述][20191220165145460.gif] 二、源码 1.HTML <body> <div clas

川长思鸟来/ 2023年06月24日 04:52/ 0 赞/ 193 阅读

相关纯CSS3超酷3D旋转立方体动画特效

这是一款效果非常炫酷的纯[CSS3][] 3D旋转立方体动画特效。该3D立方体使用CSS3 perspective制作，可以在水平方向、垂直方向和平面视角方向旋转，效果相当震撼

绝地灬酷狼/ 2022年08月07日 16:48/ 0 赞/ 320 阅读

相关 Direct3D 12 尝鲜(四): 旋转的彩色立方体

(转载请注明出处) 有点时间没更新了，原因是找了一个多星期的bug结果发现是少了一次加法运算。。。。 ![Orz][] 不过反正没人看也就没影响啦！\_(:3」∠

小灰灰/ 2022年08月07日 16:00/ 0 赞/ 248 阅读

相关学习CSS3 3D转换，制作一个3D立方体

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需

左手的ㄟ右手/ 2022年07月15日 00:20/ 0 赞/ 304 阅读

相关 Android使用OpenGL ES 3.0实现随手指旋转3D立方体

OpenGL ES在做普通应用方面3D使用的不多，但有时候实现一些有趣的功能也是蛮不错的。画立方体的的demo网上已经很多了，这次我们就实现一个随手指旋转的立方体，这个demo

我不是女神ヾ/ 2022年05月23日 04:28/ 0 赞/ 514 阅读

相关 8.1、3D变换之旋转立方体

方法一： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <sty

末蓝、/ 2022年04月11日 11:13/ 0 赞/ 215 阅读

相关 3D旋转

在我们平时看到的网页中,有很多效果都是有3D特效的,今天就做一个简单的立方体. 效果图是这样的: ![1567645-20190528010300441-155820918

短命女/ 2021年12月23日 06:21/ 0 赞/ 429 阅读