使用css透視屬性創建矩形3d框

Question

我需要獲取與圖像中相同的矩形框。我試過這個w3c代碼並且玩了。仍然無法按照我想要的方式獲得它。請幫助一些建議。 enter image description here

#div1 { 
 
    position: relative; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 50px; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    -webkit-perspective: 150px; 
 
    /* Chrome, Safari, Opera */ 
 
    -webkit-perspective-origin: 10% 10%; 
 
    /* Chrome, Safari, Opera */ 
 
    perspective: 150px; 
 
    perspective-origin: 15% 10%; 
 
} 
 

 
#div2 { 
 
    padding: 50px; 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    background-color: blue; 
 
    -webkit-transform: rotateX(45deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(25deg); 
 
}

<div id="div1"> 
 
    <div id="div2">sample</div> 
 
</div>

Answer 1

這是你在找什麼？

body { 
 
    background: #F4F7FA; 
 
} 
 

 
.center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: -100px; 
 
} 
 

 
.parent { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolue; 
 
    -webkit-perspective: 1000px; 
 
    perspective: 1000px; 
 
} 
 

 
.child { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: white; 
 
    border-radius: 10px; 
 
    box-shadow: 0px 3px 15px rgba(0,0,0,0.15); 
 
    -webkit-transform: rotateX(1deg) rotateY(9deg); 
 
    transform: rotateX(1deg) rotateY(22deg); 
 
}

<div class="center"> 
 
    <div class="parent"> 
 
    <div class="child"></div> 
 
    </div> 
 
<div>