Rumah > Artikel > hujung hadapan web > css3之3D魔方动画(小白版)
.box{ animation: cube_animation ease-in-out 6s infinite forwards; transform-style: preserve-3d; transform-origin: 90px 90px 90px; } .bside{ width: 180px; height: 180px; position: absolute; transform: translatex(-90px) translatez(90px) rotatey(90deg); } .cside{ width: 180px; height: 180px; position: absolute; transform: translatez(90px) translatey(90px) rotatex(90deg); } .eside{ width: 180px; height: 180px; position: absolute; transform: translatez(90px) translatey(-90px) rotatex(90deg); }
在这里分享一下3D魔方动画,html5+CSS3即可完成~无图无真相,先上效果图
第一步非常简单,就是先将魔方的结构画出来。大家都玩过魔方,知道魔方是一个有六个面的正方体。这里我们先写一个大的div(类名为box)作为容器,里面包含魔方6个面,即6个div,然后我这里每个面里还分了9个小div就是9个小格子。代码如下,简单看看
<!-- 魔方六面 --> <div class="box"> <div class="aside"> <!--魔方第一个面,类名aside--> <div></div> <!--第一个面里的每一个小格子--> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> ...<!--魔方另外五个面代码和第一个面一样,此处省略--> </div>
第二步,有了魔方的结构,我们开始给魔方上色。我们直接看代码,简单粗暴~
<span style="color: #000000;">.aside{ width: 180px; height: 180px; /* 这里定义每个面长宽都是180px */ position: absolute; /* 设置绝对定位,方便后面控制每个面的位置*/ transform: translatez(0px); /*对这个面进行位置的移动*/ } .aside div{ width: 54px; height: 54px; border-radius: 4px; /*设置圆角才能看到格子与格子间的小孔*/ float: left; border: 3px solid #000; <span style="color: #000000;">/* 这里定义每个格子的边框是3px 所以一个格子总的长宽是54+3+3=60px 一行3个格子60*3=180px 一列同理 */</span> background: green; /*上色*/ }</span>
第三步,我们画了这么久魔方,你把文件放到浏览器一看,结果发现连个魔方的影都没有? 不急。我们首先需要在父容器上添加 transform-style: preserve-3d; 这句代码很关键,让该元素的子元素看起来变成3D效果,默认是平面效果(2D),(具体请看https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style)
好,添加了这句代码以后,我们要开始移动6个面,使之组合后看起来是个正方体。移动6个面无非就是以下几句代码
<span style="color: #000000;">/*向X轴正方向平移80px长度、向Y轴负方向平移80PX、向Z轴正方向平移90px*/ transform: translatex(80px) translatey(-80px) translatez(90px); /*向X轴顺时针转动30度(℃)、向Y轴顺时针转动45度、向Z轴逆时针转动90度*/ transform:rotatex(30deg) rotatey(45deg) rotatez(-90deg);</span>
什么?你说浏览器不兼容?自己加相应前缀即可,这里不详细讨论。栗子(-webkit-transform:rotatex(30deg);)
自己打开浏览器F12慢慢调试自己想要的角度。这里贴上我自己的代码仅供参考~
.box{ animation: cube_animation ease-in-out 6s infinite forwards; /*魔方动画设置*/ transform-style: preserve-3d; /*3d渲染*/ transform-origin: 90px 90px 90px; } /*魔方动画效果*/<br />@keyframes cube_animation{<br /> from,to{}<br /> 16%{<br /> transform: rotatey(-90deg);<br /> }<br /> 33%{<br /> transform: rotatey(-90deg) rotatez(135deg);<br /> }<br /> 50%{<br /> transform: rotatey(225deg) rotatez(135deg);<br /> }<br /> 66%{<br /> transform: rotatey(135deg) rotatex(135deg);<br /> }<br /> 83%{<br /> transform: rotatex(135deg);<br /> }<br />} /*魔方六面*/ .aside{ width: 180px; height: 180px; position: absolute; } .bside{ width: 180px; height: 180px; position: absolute;<br /> /*魔方的B面,先向左平移90px,再靠近人脸90px,最后y轴顺时针90度*/ transform: translatex(-90px) translatez(90px) rotatey(90deg); } .cside{ width: 180px; height: 180px; position: absolute;<br /> transform: translatez(90px) translatey(90px) rotatex(90deg); } .dside{ width: 180px; height: 180px; position: absolute; transform: translatez(180px); } .eside{ width: 180px; height: 180px; position: absolute; transform: translatez(90px) translatey(-90px) rotatex(90deg); }
话说哪怕做到这里,其实还是不能很好的看到魔方全貌。
好吧,放大招,在父容器中添加perspective:1000px;perspective-origin:25% 75%;
然后慢慢在浏览器F12调试数值看看有什么变化~ 最后还有个动画效果,代码我已经贴在上面了,具体动画原理我改天再另写一篇博客~ 谢谢你看到这里。ending~