<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#lifangti{
height: 400px;
width: 400px;
position: relative;
margin: 300px auto;
/*perspective: 800px;*/
transform-style: preserve-3d;//变成3D 因此不需要perspective属性将2D呈现3D效果
transform: rotateX(45deg) rotateY(60deg);
}
#left,#right,#top,#bottom,#front,#back{
position: absolute;
font-size: 30px;
top:0;
left: 0;
width: 400px;
height: 400px;
text-align: center;
line-height: 400px;
}
#left{
transform: rotateY(90deg) translateZ(-200px);
background-color: pink;
opacity: 0.5;
}
#right{
transform: rotateY(90deg) translateZ(200px) ;
background-color: gray;
opacity: 0.5;
}
#bottom{
transform: rotateX(90deg) translateZ(-200px);
background-color: yellow;
opacity: 0.5;
}
#top{
transform: rotateX(90deg) translateZ(200px);
background-color: blue;
opacity: 0.5;
}
#front{
transform: translateZ(200px);
background-color: green;
opacity: 0.5;
}
#back{
transform: translateZ(-200px);
background-color: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="lifangti">
<div id="left">left</div>
<div id="right">right</div>
<div id="top">top</div>
<div id="bottom">bottom</div>
<div id="front">front</div>
<div id="back">back</div>
</div>
</body>
</html>关键在于：每个面transform:rotateX/Y(90deg)后坐标轴会跟着改变 向Z轴移动一半宽的距离 组合成一个立方体。
1577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
