<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #000;
}
.box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotate3d(1, 1, 1, 30deg);
}
.box > div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.sq1{
transform: translatez(100px);
background-color: red;
}
.sq2{
transform: translatez(-100px);
background-color: blue;
}
.sq3{
transform: translatex(-100px) rotatey(90deg);
background-color: #ff00d8;
}
.sq4{
transform: translatex(100px) rotatey(90deg);
background-color: #3bff38;
}
.sq5{
transform: translatey(-100px) rotatex(90deg);
background-color: #fff324;
}
.sq6{
transform: translatey(100px) rotatex(90deg);
background-color: #4980ff;
}
</style>
</head>
<body>
<div class="box">
<div class="sq1"></div>
<div class="sq2"></div>
<div class="sq3"></div>
<div class="sq4"></div>
<div class="sq5"></div>
<div class="sq6"></div>
</div>
</body>
</html>
效果图:
转3d 之后使用:
scale3d(.5,.5,.5) //缩小一倍
perspective: 1px; //调整透视度
perspective-origin:50px 50px; //调3d元素底部位置