transform 3D 空间转换
transform: none|transform-functions;
<div class="common demo">transfrom3d</div>
<div class="common demo-3d">transfrom3d</div>
body{
perspective: px;
}
.common{
width:px;
height:px;
text-align: center;
line-height: px;
background:#f2f2f2;
border:px solid #ccc;
position: absolute;
top: ;
left: ;
}
.demo{
z-index: ;
opacity: ;
background: red;
}
.demo-3d{
transform:translated( , ,-px);
}
.demo-3d{
transform:scaled( , ,);
}
.demo-3d{
transform: rotated(,,,deg);
}
.demo-3d{
transform:translated(px ,px ,-px) rotateZ(deg);
}
<div class="cude">
<div class="common left">left</div>
<div class="common right">right</div>
<div class="common bottom">bottom</div>
</div>
.cude {
perspective: px;
width:px;
height:px;
position: relative;
margin: px auto;
transform-style: preserve-d;
transform: rotateX(-deg) rotateY(-deg);
}
.common {
position: absolute;
top: ;
left: ;
width: px;
height: px;
background:#666;
opacity: ;
font-size:px;
text-align: center;
line-height:px;
font-weight: bold;
color:#fff;
border:px solid #fff;
}
.right {
transform: rotateY(deg) translateZ(px);
background: rosybrown;
}
.left {
transform: rotateY(-deg) translateZ(px);
background: rosybrown;
}
.bottom {
transform: rotateX(deg) translateZ(-px);
}
transform-origin: ;
transform-origin: ;
transform-origin: ;