今天教大家制作一个3D盒子旋转特效,盒子不仅可以旋转,光标移动时可以炸开,可以在盒子六个面贴图,效果特别酷炫
链接:https://pan.baidu.com/s/17OCeOTDstzZeEDG09Fw_aw
提取码:1nzx
素材和源码自取
制作方法其实很简单,用到的主要就是CSS.
首先在body新建六个div,定义好css类
然后在style内写css
此时这六个div还都在一个平面上,我们让前面的div在Y轴前进1000px,后面的div回退1000px,右面在X轴右移1000px,同时旋转90°,左面和上下同理.
此时这六个div已经成为了一个立体的盒子,我们要让它转起来.要不然预览出来只能看到一面.
再定义动画内容,这个动画各个坐标轴起始位置都为0,运行到终点时各个坐标轴位置为360°
这时这个盒子已经可以转起来了,我们要在加一个鼠标移动到盒子炸开的特效,只需要添加一个hover属性
至此,旋转盒子就制作好了.全套代码奉上.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>3d盒子</title>
<style>
.box{width: 2000px; height: 2000px;
position: relative;/*将box定义为父集对象,其余为子对象 position:relative父,绝对的定位*/
animation: xuanzhuan 20s/*添加一个20s的动画*/ infinite;/*循环*/
transform-style: preserve-3d;/*维持3d效果*/
margin: 1000px;
}
@keyframes xuanzhuan{
0%{transform: rotateX(0) rotateY(0) rotateZ(0);}/*初始动画*/
100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}/*结束动画*/
}/*动画内容*/
.box>div{width: 100%;height: 100%;
background: #777;
position: absolute;/*absolute相对*/
transition: all 0.5s;
}
.front{transform: translateZ(1000px)}/*相前移动100单位*/
.back{transform: translateZ(-1000px)}
.left{transform: translateX(1000px) rotateY(90deg)}/*右边旋转90度*/
.right{transform: translateX(-1000px) rotateY(90deg)}
.top{transform: translateY(1000px) rotateX(90deg)}
.bottom{transform: translateY(-1000px) rotateX(90deg)}
.box:hover .front{transform: translateZ(2000px) }
.box:hover .back{transform: translateZ(-2000px)}
.box:hover .left{transform: translateX(2000px) rotateY(90deg)}
.box:hover .right{transform: translateX(-2000px) rotateY(90deg)}
.box:hover .top{transform: translateY(2000px) rotateX(90deg)}
.box:hover .bottom{transform: translateY(-2000px) rotateX(90deg)}
</style>
</head>
<body>
<div class="box">
<div class="front" style="background: url(img/1.jpg);"></div>
<div class="back" style="background: url(img/2.jpg);"></div>
<div class="left"style="background: url(img/3.jpg);"></div>
<div class="right"style="background: url(img/4.jpg);"></div>
<div class="top"style="background: url(img/5.jpg);"></div>
<div class="bottom"style="background: url(img/6.jpg);"></div>
</div>
</body>
</html>