这是一款使用纯CSS3制作的炫酷3D旋转立方体爆炸展开动画特效。CSS3 3d transformations、translations、rotations 和 animations是非常酷的CSS新技术。你可以使用它们来为你的网页增加与众不同的动画效果。在这个3D旋转立方体展开动画特效中，当鼠标滑过立方体时，立方体的六个面会在不停旋转的同时向外爆炸展开，效果非常酷。
请确保使用支持CSS animations 和 3D transforms的浏览器来查看这个插件。另外，在下面的代码中都没有使用浏览器厂商的前缀，实际使用时应该加上。
HTML代码
下面的html代码只是外围展开的大立方体的代码，里面的小立方体的代码与之类似：
<div class="wrap"> <div class="cube"> <div class="front"> Front side </div> <div class="back"> Back side </div> <div class="top"> Top side </div> <div class="bottom"> Bottom side </div> <div class="left"> Left side </div> <div class="right"> Right side </div> </div></div> |
CSS样式
首先要为父元素设置perspective：
.wrap { margin-top: 150px; perspective: 1000px; perspective-origin: 50% 50%;} |
立方体的六个面都要设置为绝对定位，并且要在父元素上设置transform-style: preserve-3d;这样每个面才有立体效果。
.cube { margin: auto; position: relative; height: 200px; width: 200px; transform-style: preserve-3d;}.cube > div { position: absolute; box-sizing: border-box; padding: 10px; height: 100%; width: 100%; opacity: 0.9; background-color: #000; border: solid 1px #eeeeee; color: #ffffff;} |
下面要分别为面一个面设置旋转和中心点，使六个面组成立方体。
.front { transform: translateZ(100px);}.back { transform: translateZ(-100px) rotateY(180deg);}.right { transform: rotateY(-270deg) translateX(100px); transform-origin: top right;}.left { transform: rotateY(270deg) translateX(-100px); transform-origin: center left;}.top { transform: rotateX(-270deg) translateY(-100px); transform-origin: top center;}.bottom { transform: rotateX(270deg) translateY(100px); transform-origin: bottom center;} |
使用相同的方法可以制作出更为复杂的3D图形。
旋转效果
要使立方体旋转起来，需要定义一个X轴和Y轴的从0度到360度的旋转，使它应用在立方体上，同时设置为无限循环模式。
@keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); }}.cube { animation: rotate 20s infinite linear;} |
爆炸展开效果
为了制作鼠标滑过立方体爆炸展开的效果，可以为每一个面都添加一个transition过渡，分别使六个面向外移动100像素。
.wrap:hover .front { transform: translateZ(200px);}.wrap:hover .back { transform: translateZ(-200px) rotateY(180deg);}.wrap:hover .right { transform: rotateY(-270deg) translateZ(100px) translateX(100px);}.wrap:hover .left { transform: rotateY(270deg) translateZ(100px) translateX(-100px);}.wrap:hover .top { transform: rotateX(-270deg) translateZ(100px) translateY(-100px);}.wrap:hover .bottom { transform: rotateX(270deg) translateZ(100px) translateY(100px);}.cube > div { transition: transform 0.2s ease-in;} |
网盘下载密码:6mxi
