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:    ;