网页制作3D盒子旋转特效,附素材原码效果图

今天教大家制作一个3D盒子旋转特效,盒子不仅可以旋转,光标移动时可以炸开,可以在盒子六个面贴图,效果特别酷炫

先上效果图给大家看看

链接：https://pan.baidu.com/s/17OCeOTDstzZeEDG09Fw_aw
提取码：1nzx
素材和源码自取

制作方法其实很简单,用到的主要就是CSS.
首先在body新建六个div,定义好css类

body.png

然后在style内写css

先用一个box包裹六个div.j将.box定义为父集,div定位为子集,我们就可以只对box进行动画操作,而不用一个个搞div.

定义box.png

此时这六个div还都在一个平面上,我们让前面的div在Y轴前进1000px,后面的div回退1000px,右面在X轴右移1000px,同时旋转90°,左面和上下同理.

div的属性.png

此时这六个div已经成为了一个立体的盒子,我们要让它转起来.要不然预览出来只能看到一面.

所以要对box添加一个animation动画,命名为xuanzhuan,时间维持20s,加一个infinite持续旋转,要不然盒子转20s转完一圈就停了.

定义动画.png

再定义动画内容,这个动画各个坐标轴起始位置都为0,运行到终点时各个坐标轴位置为360°

动画内容.png

这时这个盒子已经可以转起来了,我们要在加一个鼠标移动到盒子炸开的特效,只需要添加一个hover属性

炸开.png

至此,旋转盒子就制作好了.全套代码奉上.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

.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>

</div>

</body>
</html>