css实现3D立体
程序员文章站
2022-03-25 16:42:20
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/* width: 160px;
height: 300px;
margin: 0 auto;
修改基本样式 */
}
.div1{
margin: 0 auto;
width: 160px;
height: 300px;
margin-top: 100px;
transform: perspective(400px) rotatex(105deg) rotatey(45deg);
/*拥有近大远小透视效果*/
transform-style: preserve-3d;
/*设置为3d空间*/
position: relative;
border:1px solid #000000;
animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
/*旋转动画*/
}
.div1 div{
position: absolute;
font-size: 80px;
line-height: 300px;
text-align: center;
top: 0;
left: 0;
/*内部样式*/
}
.div1_1{
width: 160px;
transform: translatez(65px);
background-color: red;
/*向前移动100像素，作为最前面的面*/
}
.div1_2{
transform: rotatex(90deg) translatez(100px);
background-color:green;
/*绕x轴旋转90度，在z轴正方向移动100像素，作为上面的面*/
/*注：旋转时坐标系会跟着一起旋转，z轴原来是垂直屏幕向外的，绕x轴旋转90度以后就是在屏幕上向上的方向*/
}
.div1_3{
width: 160px;
transform: rotatex(180deg) translatez(65px);
background-color: blue;
/*绕x轴旋转180度，这时z轴垂直屏幕向内，在z轴正方向移动100像素，作为后面的面*/
}
.div1_4{
transform: rotatex(270deg) translatez(100px);
background-color: purple;
/*绕x轴旋转270度，这时z轴向下，在z轴正方向移动100像素，作为下面的面*/
}
.div1_5{
width: 130px;
transform: rotatey(90deg) translatez(100px);
background-color: pink;
/*绕y轴旋转90度，这时z轴向右，在z轴正方向移动100像素，作为右面的面*/
}
.div1_6{
width: 130px;
transform: rotatey(270deg) translatez(65px);
background-color: yellow;
/*绕y轴旋转90度，这时z轴向左，在z轴正方向移动100像素，作为左面的面*/
}
/* @-webkit-keyframes xuanzhuan{
0% {transform:perspective(400px) rotateY(0deg)}
25% {transform:perspective(400px) rotateY(45deg)}
50% {transform:perspective(400px) rotateY(90deg)}
75% {transform:perspective(400px) rotateY(135deg)}
100% {transform:perspective(400px) rotateY(180deg)}
} */
/* .div1:hover{
transform: perspective(400px) scale(1.5);
animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
} */
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">1</div>
<!-- <div class="div1_2">2</div> -->
<div class="div1_3">3</div>
<!-- <div class="div1_4">4</div> -->
<div class="div1_5">5</div>
<div class="div1_6">6</div>
</div>
<!--html标签布局-->
</body>
</html>
上一篇： 视图