我不是在數學和幾何形狀好,所以我很願意,如果有人可以幫助我創建以下形狀:CSS3匹配形狀3D(立方體的頂部)
所以基本上形狀存在了3個長方形的,我得到了前兩個工作完美與變換矩陣,但我不能讓最後一個相匹配的形狀(見上文IMG鏈接)
JSFiddle, what I tried so far or see code below
HTML
<div class="shape">
<div class="shape-rect-one"></div>
<div class="shape-rect-two"></div>
<div class="shape-rect-three"></div>
</div>
CSS
.shape {
perspective: 1000px;
}
.shape div {
width: 100px;
height: 100px;
opacity: 0.4;
background-color: #333;
}
.shape-rect-one {
z-index: 100;
transform: matrix(1, -0.40, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.40, 0, 1, 0, 0);
}
.shape-rect-two {
z-index: 200;
transform: matrix(1, -0.40, 0, 1, 0, 0);
-webkit-transform: matrix(1, 0.40, 0, 1, 0, 0);
}
.shape-rect-three {
z-index: 300;
}
http://jsfiddle.net/5hGtP/7/有點兒接近。 – Shmiddty
@Smiddty我該如何解決這些差異? – onlineracoon