css3立体盒子实现
2020-04-30 本文已影响0人
我就是看看哦
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style type="text/css">
.container{
width:300px;
height: 300px;
margin: 150px auto;
/*border:1px solid red;*/
perspective: 20000px
}
.box{
width: 300px;
height: 300px;
/*控制子元素保持3d转换*/
transform-style: preserve-3d;
/*test */
transform: rotateX(45deg) rotateY(45deg);
}
.box-content{
width:300px;
height: 300px;
position: absolute;
}
.box-top{
background: red;
transform: translateZ(150px);
}
.box-bottom{
background: yellow;
transform: translateZ(-150px) rotateX(180deg);
}
.box-left{
background: green;
transform: translateX(-150px) rotateY(-90deg);
}
.box-right{
background: blue;
transform: translateX(150px) rotateY(90deg);
}
.box-before{
background: orange;
transform: translateY(150px) rotateX(-90deg);
}
.box-after{
background: pink;
transform: translateY(-150px) rotateX(90deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="box-content box-top">
</div>
<div class="box-content box-bottom">
</div>
<div class="box-content box-left">
</div>
<div class="box-content box-right">
</div>
<div class="box-content box-before">
</div>
<div class="box-content box-after">
</div>
</div>
</div>
</body>
</html>
