精华内容
下载资源
问答
  • html5正方体旋转

    2016-09-11 13:23:57
    html5正方体旋转
  • 效果图:css代码:复制代码代码如下:@keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}@keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX...

    效果图:

     

    css代码:

    复制代码代码如下:

    @keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}

    @keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX(360deg); }}

    /*************** 水平立方体 ***************/

    .cube-wrap {perspective: 800px;perspective-origin: 50% 100px;float:left;margin:150px 0 0 200px;}

    .cube {position: relative;width: 200px;-moz-transform-style: preserve-3d;-moz-animation: spin 20s infinite linear;}

    .cube div{position: absolute;width: 200px;height: 200px;background: rgba(255,255,255,0.1);box-shadow: inset 0 0 30px rgba(125,125,125,0.8);text-align: center;line-height: 200px;font-weight:bold;text-shadow:-1px 1px 5px #f60;color:#fff;font-family: sans-serif;text-transform: uppercase;font-size:30px;}

    .depth div.back-pane {transform: translateZ(-100px) rotateY(180deg);}

    .depth div.right-pane {transform:rotateY(-270deg) translateX(100px);transform-origin: top right;}

    .depth div.left-pane {transform:rotateY(270deg) translateX(-100px);transform-origin: center left;}

    .depth div.top-pane {transform:rotateX(-90deg) translateY(-100px);transform-origin: top center;}

    .depth div.bottom-pane {transform:rotateX(90deg) translateY(100px);transform-origin: bottom center;}

    .depth div.front-pane {transform: translateZ(100px);}

    /*************** 垂直旋转的立方体 ***************/

    .cube-wrap.vertical .cube {transform-origin: 0 100px;animation: spin-vertical 5s infinite linear;}

    .cube-wrap.vertical .depth div.top-pane {transform:rotateX(-270deg) translateY(-100px);}

    .cube-wrap.vertical .depth div.back-pane {transform: translateZ(-100px) rotateX(180deg);}

    .cube-wrap.vertical .depth div.bottom-pane {transform: rotateX(-90deg) translateY(100px);}

    /*************** 平面旋转的立方体 ***************/

    .cube-wrap.flat {perspective: none;perspective-origin: 0 0;}

    html代码:

    复制代码代码如下:

    front
    back
    top
    bottom
    left
    right
    front
    back
    top
    bottom
    left
    right
    front
    back
    top
    bottom
    left
    right
    展开全文
  • <div class="wrap"> <!--部署内外层图片--> <div class="cube"> <!--前面图片 --> <div class="out_front"> <img src=...

     

     
    <div class="wrap">
        <!--部署内外层图片-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_1.jpg" class="pic">
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_2.jpg" class="pic">
            </div>
            <!--左面图片 -->
            <div class="out_left">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_3.jpg" class="pic">
            </div>
            <!--右面图片 -->
            <div class="out_right">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_4.jpg" class="pic">
            </div>
            <!--上面图片 -->
            <div class="out_top">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_5.jpg" class="pic">
            </div>
            <!--下面图片 -->
            <div class="out_bottom">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_6.jpg" class="pic">
            </div>
     
            <!--小正方体 -->
            <span class="in_front">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_8.jpg" class="in_pic">
                </span>
            <span class="in_back">
                     <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_9.jpg" class="in_pic">
                </span>
            <span class="in_left">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_10.jpg" class="in_pic">
                </span>
            <span class="in_right">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_11.jpg" class="in_pic">
                </span>
            <span class="in_top">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_12.jpg" class="in_pic">
                </span>
            <span class="in_bottom">
                    <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_7.jpg" class="in_pic">
                </span>
        </div>
     
        <style>
            /*最外层容器样式*/
            .wrap {
                width: 100px;
                height: 100px;
                margin: 150px;
                position: relative;
            }
     
            /*得到立方体效果*/
            .cube {
                width: 50px;
                height: 50px;
                margin: 0 auto;
                transform-style: preserve-3d;
                /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
                animation: rotate linear 20s infinite;
            }
     
            /*动画旋转的方式*/
            /*得到动画效果*/
            @-moz-keyframes rotate {                     /*firefox*/
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            @-webkit-keyframes rotate {                /*sofari chrome*/
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            @-o-keyframes rotate {                    /*opera*/
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(360deg) rotateY(360deg);
                }
            }
            /*每张图片的样式*/
            .cube div {
                position: absolute;
                width: 200px;
                height: 200px;
                opacity: 0.8;
                /*过渡效果*/
                transition: all .4s;
            }
     
            /*定义所有图片样式*/
            .pic {
                width: 200px;
                height: 200px;
            }
     
            .cube .out_front {
                transform: rotateY(0deg) translateZ(100px);
            }
     
            .cube .out_back {
                transform: translateZ(-100px) rotateY(180deg);
            }
     
            .cube .out_left {
                transform: rotateY(-90deg) translateZ(100px);
            }
     
            .cube .out_right {
                transform: rotateY(90deg) translateZ(100px);
            }
     
            .cube .out_top {
                transform: rotateX(90deg) translateZ(100px);
            }
     
            .cube .out_bottom {
                transform: rotateX(-90deg) translateZ(100px);
            }
     
            /*定义小正方体样式*/
            .cube span {
                display: block;
                width: 100px;
                height: 100px;
                position: absolute;
                top: 50px;
                left: 50px;
            }
     
            .cube .in_pic {
                width: 100px;
                height: 100px;
            }
     
            .cube .in_front {
                transform: rotateY(0deg) translateZ(50px);
            }
     
            .cube .in_back {
                transform: translateZ(-50px) rotateY(180deg);
            }
     
            .cube .in_left {
                transform: rotateY(-90deg) translateZ(50px);
            }
     
            .cube .in_right {
                transform: rotateY(90deg) translateZ(50px);
            }
     
            .cube .in_top {
                transform: rotateX(90deg) translateZ(50px);
            }
     
            .cube .in_bottom {
                transform: rotateX(-90deg) translateZ(50px);
            }
     
            /*鼠标移入后样式*/
            .cube:hover .out_front {
                transform: rotateY(0deg) translateZ(200px);
            }
     
            .cube:hover .out_back {
                transform: translateZ(-200px) rotateY(180deg);
            }
     
            .cube:hover .out_left {
                transform: rotateY(-90deg) translateZ(200px);
            }
     
            .cube:hover .out_right {
                transform: rotateY(90deg) translateZ(200px);
            }
     
            .cube:hover .out_top {
                transform: rotateX(90deg) translateZ(200px);
            }
     
            .cube:hover .out_bottom {
                transform: rotateX(-90deg) translateZ(200px);
            }
        </style>
     
      </div>

     

    转载:https://blog.csdn.net/qq_40803626/article/details/103965261  仅供学习

     

    展开全文
  • 解压密码:RJ4587 之前对于HTML5立方体动画我们已经有过不少分享了,像这款HTML5/CSS3 3D立方体扭曲动画、HTML5 3D立方体旋转动画都非常不错。今天我们要介绍的这款HTML5 3D立方体动画的特点是可以定位立方体的任意...
  • 关于html实现3D旋转正方体的效果还是有很多教程的,这里分享一个源代码,注意图片尺寸保持一致,文件路径正确。代码注释还是比较多的,主要包括html和css,如下: <!doctype html> <html lang="en"> &...

    关于html实现3D旋转正方体的效果还是有很多教程的,这里分享一个源代码,注意图片尺寸保持一致,文件路径正确。代码注释还是比较多的,主要包括html和css,如下:

    <!doctype html>
    <html lang="en">
     <!--网页头部信息-->
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="123">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>index(旋转正方体)</title>
      <link href="images/6.jpg" rel="icon"><!--logo-->
      <!--css 层叠样式 -->
      <style>
    	.bigbox{
    			margin:100px auto;
    			position: relative;
    			width: 400px;/*宽400px*/
    			height: 400px;/*高:400px*/
    			/*background-color: skyblue;*/
    	}
    	.smallbox{
    			position: absolute;
    			left:0;
    			top:0;
    			right:0;
    			bottom:0;
    			margin: auto;
    			width: 200px;/*宽200px*/
    			height: 200px;/*高:200px*/
    			/*background-color: red;*/
    			/*开启3D动画*/
    			transform-style:preserve-3d;
    			/*动画名字 动画时间 动画速度 动画循环*/
    			animation:move 5s linear infinite;
    	}
    		.smallbox div{
    		position: absolute;
    		width: 100% ; /*继承父级元素宽*/
    		height: 100%;
    	}/*继承*/
    	.smallbox div img{
    		position: absolute;
    		top:0;
    		left:0;	
    		width: 100% ; /*继承父级元素宽*/
    		height: 100%;
    	}
    	.smallbox div{
    		position: absolute;
    		width: 100% ; /*继承父级元素宽*/
    		height: 100%;
    		}
    	.smallbox1 div img{
    		position: absolute;
    		top:0;
    		left:0;	
    		width: 50% ; /*继承父级元素宽*/
    		height: 50%;
    	}
    	/*制定动画*/
    	@keyframes move{
    		0%{
    			transform :rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    			/*deg(度数) rotate旋转*/
    		}
    		100%{
    			transform :rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    		}
    	}
    	/*摆放每个正方体的位置(图片)*/
    	.front1{
    		transform:translateZ(50px);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.back1{
    		transform:translateZ(-50px);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.left1{
    		transform:  rotateY(90deg) translateX(50px);/*translate平移(XYZ) 前面-正值 后*/
    	}
    	.right1{
    		transform:  translateX(-100px)  rotateY(90deg) translateX(50px);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.top1{
    		transform:translateY(-100px) rotateX(90deg) translateY(50px);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.bottom1{
    		transform: rotateX(90deg) translateY(50px);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.front{
    		transform:translateZ(100px);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.back{
    		transform:translateZ(-100px);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.left{
    		transform:translateX(-100px) rotateY(90deg);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.right{
    		transform:translateX(100px) rotateY(90deg);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.top{
    		transform:translateY(-100px) rotateX(90deg);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	.bottom{
    		transform:translateY(100px) rotateX(90deg);/*translate平移(XYZ) 前面-正值 后-负*/
    	}
    	
    	
    	/**/
    	.bigbox:hover .front{
    		transform:translateZ(200px);
    	}
    	.bigbox:hover .back{
    		transform:translateZ(-200px);
    	}
    	.bigbox:hover .left{
    		transform:translateX(-200px) rotateY(90deg);
    	}
    	.bigbox:hover .right{
    		transform:translateX(200px) rotateY(90deg);
    	}
    	.bigbox:hover .top{
    		transform:translateY(-200px) rotateX(90deg);
    	}
    	.bigbox:hover .bottom{
    		transform:translateY(200px) rotateX(90deg);
    	}
    	/**/
    	</style>
     </head>
     <body>
    	<!--  
    		旋转正方体思路:
    		创建大的矩形区域(class.id)(格式))
    		大盒子里面创建小盒子
    				小盒子里面引入图片
    				图片大小设置一样
    	
    	-->
    	<div class ="bigbox"><!--div嵌套盒子-->
    			<div class="smallbox">	
    				<div class="smallbox1">
    					<div class="front1">
    						<img src="images/a.jpg">
    					</div>
    					<div class="back1">
    						<img src="images/b.jpg">
    					</div>
    					<div class="left1">
    						<img src="images/c.jpg">
    					</div>
    					<div class="right1">
    						<img src="images/d.jpg">
    					</div>
    					<div class="top1">
    						<img src="images/e.jpg">
    					</div>
    					<div class="bottom1">
    						<img src="images/f.jpg">
    					</div>
    				</div>
    				<!--正方体前面的图片-->
    					<div class="front">
    						<img src="images/7.jpg">
    					</div>
    					<!--正方体后面的图片-->
    					<div class="back">
    						<img src="images/8.jpg">
    					</div>
    					<!--正方体左面的图片-->
    					<div class="left">
    						<img src="images/9.jpg">
    					</div>
    					<!--正方体右面的图片-->
    					<div class="right">
    						<img src="images/10.jpg">
    					</div>
    					<!--正方体上面的图片-->
    					<div class="top">
    						<img src="images/11.jpg">
    					</div>
    					<!--正方体下面的图片-->
    					<div class="bottom">
    						<img src="images/12.jpg">
    				</div>		
    			</div>
    	</div>
     </body>
    </html>
    
    
    展开全文
  • **代码非常的简单,运用CSS3的一些新特性。 废话不多说,代码献上。 &amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;html lang=&...

    我爱撸码,撸码使我感到快乐。
    大家好,我是Counter。
    代码非常的简单,运用CSS3的一些新特性。
    效果如下: 点击查看效果

    • 代码献上,每行基本都有详细注释,这边就不在赘述。
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>3D旋转</title>
        <style>
            /* 给最外层父级设置景深,让里面的元素有立体的空间,并且设置宽高 */
            .wrapper {
                /* 景深600像素 */
                perspective: 500px;
                /* 设置margin距离上面100px,左右自适应,下面0 */
                margin: 100px auto 0;
                width: 200px;
                height: 200px;
                /* border: 1px solid black; */
            }
            
            .box {
                /* 设置相对定位好让子元素相对于自己定位 */
                position: relative;
                /* 给item设置保留3D效果,如果没有设置里面的元素将不会呈现3D效果 */
                transform-style: preserve-3d;
                width: 200px;
                height: 200px;
                /* move为设置的关键帧,运动8秒,匀速运动,无限次(各个参数代表的含义) */
                animation: move 8s linear infinite;
            }
    
            /* 选择所有开头带有item的元素,使其全部定位到父级所在的位置 */
            div[class^="item"] {
                position: absolute;
                top: 0;
                left: 0;
                width: 200px;
                height: 200px;
                /* 使文本左右对齐 */
                text-align: center;
                /* 使文本上下对齐 */
                line-height: 200px;
            }
    
            /* 立方体有六面,每个item1~6代表每一面,此时里面的item1~6具有三条轴,x,y,z */
            /* x轴即是你电脑屏幕宽度的那条轴,从左到右。y轴即是你电脑屏幕高度的那条轴,从上到下。z轴即是你眼睛垂直看电脑屏幕的那条轴,方向从电脑屏幕到你的眼睛*/
            /* 设置第一面 */
            .item1 {  
                /* 沿z轴向你眼睛方向移动100px */
                transform: translateZ(100px);
                /* 设置背景颜色,最后一个参数为透明度设置为0.6 */
                background-color: rgba(255, 0, 0, 0.6);
            }
            /* 设置第二面 */
            .item2 {
                /* 沿z轴向里移动100px即为-100px */
                transform: translateZ(-100px);
                background-color: rgba(72, 42, 245, 0.6);
            }
            /* 设置第三面 */
            .item3 {
                /* 沿x轴旋转90度,然后再向z轴移动100px(deg在这里表示度的意思) */
                transform: rotateX(90deg) translateZ(100px);
                background-color: rgba(217, 230, 36, 0.6);
            }
            /* 设置第四面 */
            .item4 {
                /* 沿x轴旋转90度,然后再向z轴移动-100px */
                transform: rotateX(90deg) translateZ(-100px);
                background-color: rgba(58, 7, 51, 0.6);
            }
            /* 设置第五面 */
            .item5 {
                /* 沿y轴旋转90度,然后再向z轴移动-100px */
                transform: rotateY(90deg) translateZ(-100px);
                background-color: rgba(241, 142, 75, 0.6);
            }
            /* 设置第六面 */
            .item6 {
                /* 沿y轴旋转90度,然后向z轴移动100px */
                transform: rotateY(90deg) translateZ(100px);
                background-color: rgba(125, 178, 238, 0.6);
            }
    
            /* 设置关键帧让box容器旋转起来,分别沿x,y,z轴从0旋转360度 */
            @keyframes move {
                0% {
                    transform: rotateX(0) rotateY(0) rotateZ(0);
                }
                100% {
                    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box">
                <div class="item1">1</div>
                <div class="item2">2</div>
                <div class="item3">3</div>
                <div class="item4">4</div>
                <div class="item5">5</div>
                <div class="item6">6</div>
            </div>
        </div>
    </body>
    </html>
    
    
    展开全文
  • 3D立方体旋转相册.html

    2020-06-07 14:37:13
    3D立方体旋转相册,利用了CSS和HTML,换掉图片可以直接拿来用
  • 实现效果:实现代码:#aa{margin: 100px auto;width: 200px;height: 200px;transform-style: preserve-3d;position: relative;transform: rotateX(-15deg) rotateY(45deg);animation: name 6s linear 100ms infinite...
  • html5 3D旋转立方体

    2018-07-19 09:36:35
    使用html5+css3+jquery组合,一个可以通过按键控制立方体旋转的demo,具有3D效果。
  • 完整实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>旋转立方体</title> <style type="text/css"> .container{ width: 100%; ...
  • 纯css实现旋转正方体

    2021-11-10 15:28:54
    纯css实现旋转正方体 思路: 1、建一个父div作为正方体容器,在div里面建六个子div作为正方体六个面。 2、创建关键帧,让父div旋转起来。 效果: 代码: <style> /* 设置正方体容器 */ .fu { margin: 150...
  • 静态效果图如下:示例代码:复制代码代码如下:* { margin: 0; padding: 0}ul {list-style: none;}ul {width: 200px;height: 200px;margin: 200px auto;position: relative;transition: all 6s;/*6秒时间转变*/...
  • 感觉还是比较简单的,直接上图:要做出的效果就是这个立体的正方体,然后再让它自己不停地转动代码展示: &lt;!DOCTYPE html&...旋转正方体&lt;/title&gt; &lt;style&gt; *{
  • 可任意翻转HTML5立方体是一款HTML5 3D立方体动画,立方体可任意翻转。
  • 3D旋转立方体(HTML+CSS3)源码 主要知识点:css3的transform,rotate,translate,animation等动画, 以perspective,transform-style等属性为辅助
  • HTML 5 大小正方体旋转特效 代码,纯css3 滑动 展开特效
  • 如何用HTML5写一个旋转立方体

    千次阅读 2019-03-21 18:12:20
    当鼠标放在上面旋转 代码如下 立方体 上 下 左 右 前 后
  • 纯CSS3实现旋转正方体

    2019-03-23 15:20:40
    效果展示: ...代码展示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0...
  • HTML5 CSS3 : 3D立方体旋转动画实例源码

    万次下载 热门讨论 2014-07-12 09:58:23
    代码为博客实例代码:http://blog.csdn.net/lmj623565791/article/details/34120047 有问题博客中留言
  • 3D旋转相册代码及详细使用教程

    万次阅读 多人点赞 2020-08-19 17:20:36
    相信很多小伙伴看着短视频里的3D旋转相册很想要吧,下面就让我们来看看它的代码及使用方法吧! 效果展示 代码展示 1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...
  • html制作3d旋转正方形相册

    千次阅读 2020-04-02 11:27:57
    html制作3d旋转正方体相册 首先给大家看看效果图:动态效果,就接了几张图片给大家看 做这个实验最主要的就是用到了HTML5的动画的 animation 属性 和@keyframes规则 说先看看keyframers的规则语法定义: @ ...
  • css3实现正方体旋转效果

    千次阅读 2019-10-22 16:32:26
    css3实现正方体旋转效果 实现效果图 涉及知识点 3D移动 方法:translate3d(x,y,z) 单独设置:translateX(length),translateY(length),translateZ(length) 3D旋转 方法:rotate3d(x,y,z,angle) 3D动画结果保留...
  • 特效描述:html53D 旋转的...html5 css3转换属性创建3D旋转立方体多维数据图片库代码代码结构1. HTML代码 单击下面的图片来旋转立方体。//DOM load eventwindow.addEventListener("DOMContentLoaded",() => {c...
  • Html+Css 3D旋转立方体

    千次阅读 2019-04-23 16:13:04
    在上一篇的Html+Css+Js 3D旋转爱心 中间可插图片的代码基础上稍做修改获得两个大小不一3D旋转立方体,留作记忆,代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...
  • 文章目录一.CSS3实现旋转正方体二.旋转木马 一.CSS3实现旋转正方体 效果图 <!DOCTYPE html> <!-- 正方体旋转 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
  • c3旋转正方体

    2019-11-27 23:35:39
    h5+ css 编写炫酷的旋转正方体效果(表白神器)* 直接上代码 主要运用c3里面的3d效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • css实现旋转正方体

    千次阅读 2019-05-07 19:40:59
    此方法是把先把元素叠在一起再展开。 还可以把元素摆成一个摊开的正方体再折叠。
  • html部分: 连接css 定义大盒子放入想要的图片(此处我直接在放入图片时直接定义了图片的大小,并不规范) css部分: 首先设置盒子的属性,其中transform-style:preserve-3d则是将盒子定义为3d形式,用于制作...
  • 旋转照片魔方.7z

    2019-05-25 09:45:49
    采用 html css javascript 实现的立体旋转动态魔方,六个面的照片可自行替换,代码已经过详加注释,只需要自行换上照片,即可看到炫酷的动态魔方

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,177
精华内容 470
关键字:

html旋转的正方体代码

友情链接: pic-usb.rar