3D旋转立方体

谁借莪１个温暖的怀抱￠ 2023-10-06 09:11 197阅读 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 条评论，197人围观）

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

相关阅读

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

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

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

相关 3D旋转立方体

效果图; ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

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

相关 3D旋转立方体相册

目录一、实现效果二、图片素材三、代码一、实现效果 > 点击下面六个小的图片，上面的立方体会旋

淩亂°似流年/ 2023年10月03日 14:05/ 0 赞/ 106 阅读

相关 HTML5——3D立方体旋转动画

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

「爱情、让人受尽委屈。」/ 2023年07月20日 12:23/ 0 赞/ 124 阅读

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

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

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

相关用css样式制作3D立方体旋转

{ margin: 0; padding: 0; /去除默认边距/ } ul{

傷城~/ 2023年05月31日 03:25/ 0 赞/ 163 阅读

相关 3D立方体盒子

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

布满荆棘的人生/ 2023年02月28日 04:16/ 0 赞/ 17 阅读

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

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

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

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

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

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

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

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

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