这篇“如何使用纯CSS实现3D”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“如何使用纯CSS实现3D”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了高淳免费建站欢迎大家使用!
一、正方体
我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面所组成,其次就需要我们依次构造。(据体构造在代码中)
代码如下:
.d3{
height:300px;
width:300px;
perspective:800px;
margin:140pxauto;
border:1pxsolid#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:dong3slinearinfinite;(这是舞台)
}
.stage:hover{
animation:paused;
}
@keyframesdong{(这是使舞台旋转的动画)
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;
}
(将正方体分为六个相同的面)
二、动态立体图片册
将图片册设计成立体3D的效果
利用旋转、移动、倾斜和3D效果让你的图册更加漂亮。
代码如下:
(将第一张定好位置后将后面的依次排列)
body{
height:100vh;
}
.div{
height:500px;
width:800px;
perspective:800px;
margin:50pxauto;
}
.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:600px400px;
border-radius:20px;
transform-origin:rightbottom;
transition:3s;
}
.div_2{
background:url(../day03/timg1.jpg);
border-radius:20px;
background-size:600px400px;
transform-origin:rightbottom;
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:rightbottom;*/
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:600px400px;
transform-origin:rightbottom;
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:600px400px;
transform-origin:rightbottom;
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:600px400px;
transform-origin:rightbottom;
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:600px400px;
transform-origin:rightbottom;
transform:rotateZ(10deg)translateZ(-100px)translateX(100px)translateY(-100px);
}
.div_6:hover{
transform:rotateZ(0)translateZ(0)translateX(0)translateY(0);
transition:1s;
}