css之3D效果——正方体 css正方体照片墙源码

前文

css是前端开发样式的基础，除了2d效果还可以做出很多酷炫的3d效果，本文就带大家体验简单的3d效果

1、基本布局

想象一下正方体纸盒被拆开

基本布局的代码

2、实现

正方体应该都会折吧，按边线折90°

注意:上下面不是折叠而是平移；并且默认旋转的中心是在正方形的中间轴（多摸索就明白了），所以要用transform-origins属性调一下

折完后是这样子的，貌似这不是正方体啊，其实他已经是了，只是视觉上离我们太近挡住了后面所以我们看不出。

所以引出了这个属性perspective:属性，他定义视图（也就是本文的立方体）离我们眼睛的距离，800-1000px是3d效果比较好的

是不是有立方体的感觉了，我们让他旋转一下就很明显了

3、完整style代码

<style>

*{

margin: 0;

padding: 0;

}

body{

perspective: 830px;//定义视图离我们的距离

}

.box{

width: 200px;

height: 200px;

margin: 200px auto;

position: relative;

transform-style:preserve-3d;

transition:all 2s; //过度效果

animation: rotate 5s infinite linear; //执行旋转动画

}

.box div{

width: 200px;

height: 200px;

border: 2px solid #ccc;

position: absolute;

}

.box div:nth-child(1)

{

top: -202px;

transform-origin: bottom;

transform: rotateX(90deg);

}

.box div:nth-child(2)

{

top: 202px;

transform-origin: top;

transform: rotateX(-90deg);

}

.box div:nth-child(3)

{

left: -202px;

transform-origin: right;

transform: rotateY(-90deg);

}

.box div:nth-child(4)

{

left: 202px;

transform-origin: left;

transform: rotateY(90deg);

}

.box div:nth-child(5)

{

}

.box div:nth-child(6)

{

transform: translateZ(-202px);

}

@keyframes rotate{ //定义旋转动画

0%{

}

100%{

transform:rotateX(360deg);

}

}

</style>

4、总结

这是最简单的3d效果了，原理要弄懂了，剩下的只要你脑洞大，你可以做出很多神奇的东西！