本篇文章所说的内容是纯css实现3d的代码（正方体、动态立体图片册、平面的星空），代码都非常详细，有需要的朋友可以看一下。
一、正方体我认为正方体可以算是3d图像的基础吧，首先正方体是由六个相同的面所组成，其次就需要我们依次构造。（据体构造在代码中）
代码如下：
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>正方体</title><style> .d3{ height: 300px; width:300px; perspective: 800px; margin:140px auto; border:1px solid #ccc; } .stage{ height: 300px; width: 300px; transform-style: preserve-3d; position: relative; transform: rotatex(45deg) rotatey(45deg); } .role{ height: 300px; width: 300px; position: absolute; } .stage{ animation: dong 3s linear infinite;（这是舞台） } .stage:hover{ animation: paused; } @keyframes dong{（这是使舞台旋转的动画） from{ transform: rotatex(45deg) rotatey(45deg); } to{ transform: rotatex(405deg) rotatey(405deg); } } .di1{（正方体的前面） background: rgb(21, 163, 52); transform: translatez(150px);（沿着z轴向前移动150px） font-size:100px; font-family:kaiti; text-align: center; line-height: 300px; } .di2{（正方体的后面） background: blue; transform: translatez(-150px) rotatey(180deg);（沿着z轴向前移动150px然后沿着y轴旋转180°*注意顺序哦是先移动后旋转） font-size:100px; font-family:kaiti; text-align: center; line-height: 300px; } .di3{（正方体的左面） background: purple; transform: rotatey(-90deg) translatez(150px); font-size:100px; font-family:kaiti; text-align: center; line-height: 300px; } .di4{（正方体的右面） background: pink; transform: rotatey(90deg) translatez(150px); font-size:100px; font-family:kaiti; text-align: center; line-height: 300px; } .di5{（正方体的上面） background: red; transform: rotatex(90deg) translatez(150px); font-size:100px; font-family:kaiti; text-align: center; line-height: 300px; } .di6{（正方体的下面） background: yellow; transform: rotatex(-90deg) translatez(150px); font-size:100px; font-family:kaiti; text-align: center; line-height: 300px; }</style></head><body> <div> <div> （将正方体分为六个相同的面） <div class="role di1">前</div> <div class="role di2">后</div> <div class="role di3">左</div> <div class="role di4">右</div> <div class="role di5">上</div> <div class="role di6">下</div> </div> </div></body></html>
二、动态立体图片册将图片册设计成立体3d的效果
利用旋转、移动、倾斜和3d效果让你的图册更加漂亮。
代码如下：
（将第一张定好位置后将后面的依次排列）<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>事例一</title> <style> body{ height: 100vh; } .div { height: 500px; width: 800px; perspective: 800px; margin: 50px auto; } .div1 { height: 500px; width: 800px; transform-style: preserve-3d; position: relative; /* transform: rotatey(-10deg); */ } .div_0{ height:400px; width:600px; position: absolute; margin-top:110px; margin-left:50px; } .div_1{ height:400px; width:600px; background: url(../day03/timg.jpg); background-size: 600px 400px; border-radius: 20px; transform-origin: right bottom; transition: 3s; } .div_2{ background: url(../day03/timg1.jpg); border-radius: 20px; background-size: 600px 400px; transform-origin: right bottom; transform: rotatez(2deg) translatez(-20px) translatex(20px) translatey(-20px); } .div_2:hover{ transform: rotatez(0) translatez(0)translatex(0)translatey(0); transition: 1s; } .div_2:hover~.div_1{ /* transform-origin: right bottom; */ transform: rotatez(2deg) translatez(20px) translatex(20px) translatey(-20px); transition: 1s; } /* body:hover .div_1{ opacity: 0; transition: 3s; } */ .div_3{ background: url(timg2.jpg); border-radius: 20px; background-size: 600px 400px; transform-origin: right bottom; transform: rotatez(4deg)translatez(-40px)translatex(40px)translatey(-40px); } .div_3:hover{ transform: rotatez(0) translatez(0)translatex(0)translatey(0); transition: 1s; } .div_4{ background: url(timg4.jpg); border-radius: 20px; background-size: 600px 400px; transform-origin: right bottom; transform: rotatez(6deg)translatez(-60px) translatex(60px)translatey(-60px); } .div_4:hover{ transform: rotatez(0) translatez(0)translatex(0)translatey(0); transition: 1s; } .div_5{ background: url(timg5.jpg); border-radius: 20px; background-size: 600px 400px; transform-origin: right bottom; transform: rotatez(8deg)translatez(-80px) translatex(80px)translatey(-80px); } .div_5:hover{ transform: rotatez(0) translatez(0)translatex(0)translatey(0); transition: 1s; } .div_6{ background: url(timg3.jpg) no-repeat; border-radius: 20px; background-size: 600px 400px; transform-origin: right bottom; transform: rotatez(10deg)translatez(-100px) translatex(100px)translatey(-100px); } .div_6:hover{ transform: rotatez(0) translatez(0)translatex(0)translatey(0); transition: 1s; } </style></head><body> <div> <div> <div class=" div_0 div_1"></div> <div class=" div_0 div_2"></div> <div class=" div_0 div_3"></div> <div class=" div_0 div_4"></div> <div class=" div_0 div_5"></div> <div class=" div_0 div_6"></div> </div> </div></body></html>
三、平面的星空代码如下：
（由于没有用js所以只有平面的效果了
你掌握好旋转的中心点就很容易了）
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>太阳系</title><style> body { background: url(timg01.jpg) no-repeat; background-size: 100%; } .box1 { height: 600px; width: 600px; margin: 0 auto; border: 1px solid #ccc; border-radius: 50%; } .box1_0 { height: 100px; width: 100px; margin: 0 auto; border: 1px solid white; border-radius: 50%; position: absolute; top: calc(50% - 59px); left: 322px; transform-origin: 345.5px; animation: dong2 5s linear infinite 4s; } @keyframes dong2 { from { transform: rotate(0) } 100% { transform: rotate(360deg); } } .box1_2 { height: 13px; width: 13px; margin: 0 auto; /* border: 1px solid #ccc; */ border-radius: 50%; background: white; position: absolute; top: calc(50% - 7.5px); left: 96px; transform-origin: -45px; animation: dong3 5.5s linear infinite ; /* animation-iteration-count: 200; */ } @keyframes dong3 { from { transform: rotate(0); } 100% { transform: rotate(360deg); } } .box1_1 { height: 15px; width: 15px; margin: 0 auto; /* border: 1px solid #ccc; */ border-radius: 50%; background: rgb(7, 100, 223); position: absolute; top: 45px; left: calc(50% - 16.5px); } .box2 { height: 400px; width: 400px; margin: 0 auto; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: calc(50% - 200px); left: calc(50% - 200px); } .box2_1 { height: 15px; width: 15px; margin: 0 auto; /* border: 1px solid #ccc; */ border-radius: 50%; background: rgb(198, 208, 221); position: absolute; top: calc(50% - 7.5px); left: 43px; transform-origin: 157.5px; animation: dong1 5s linear infinite .5s; } @keyframes dong1 { from { transform: rotate(0) } 100% { transform: rotate(360deg); } } .box2_2 { height: 15px; width: 15px; margin: 0 auto; border-radius: 50%; background: #644e11; position: absolute; top: calc(50% - 7.5px); left: -7px; transform-origin: 207.5px; animation: dong 5s linear infinite; } @keyframes dong { from { transform: rotate(0) } 100% { transform: rotate(360deg); } } .box3 { height: 300px; width: 300px; margin: 0 auto; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: calc(50% - 150px); left: calc(50% - 150px); } .box4 { height: 30px; width: 30px; margin: 0 auto; border-radius: 50%; background: orange; position: absolute; top: calc(50% - 15px); left: calc(50% - 15px); } .boxli{ height: 900px; width: 900px; margin: 0 auto; border: 1px solid #ccc; border-radius: 50%; position: absolute; top:-120px; left:calc(50% - 450px); } .boxli_1{ height: 15px; width: 15px; margin: 0 auto; border-radius: 50%; background: rgb(116, 100, 56); position: absolute; top:500px; left:-6px; transform-origin: 455.5px -38px; animation: dongli 5s linear infinite; } @keyframes dongli { from { transform: rotate(0) } 100% { transform: rotate(360deg); } }</style></head><body> <div class="box1"> <div class="box1_0"> <div class="box1_2"></div> <div class="box1_1"></div> </div> <div class="box2"> <div class="box2_1"></div> <div class="box2_2"></div> <div class="box3"> <div class="box4"></div> </div> </div> </div> <div class="boxli"> <div class="boxli_1"></div></div></body></html>
相关推荐：
css怎么实现卡片图像翻转效果？（特效示例）
css3d+动画的例子（附完整代码）
以上就是纯css实现3d的代码（正方体、动态立体图片册、平面的星空）的详细内容。