我不擅长数学和几何,所以如果有人能帮助我创建以下形状,我会很高兴:
所以基本上形状存在于 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;
}
最佳答案
你可以用一种更简单的方式来做到这一点,只需要一个元素。
DEMO
结果:
HTML:
<div class='piece'></div>
相关CSS:
.piece {
width: 10em; height: 8.66em; /* 10*sqrt(3)/2 = 8.66 */
background: rgba(0,0,0,.5);
}
.piece {
position: relative;
transform: rotate(-30deg) skewX(30deg);
}
.piece:before, .piece:after {
position: absolute;
width: inherit; height: inherit;
background: inherit;
content: '';
}
.piece:before { transform: skewX(-30deg) skewX(-30deg); }
.piece:after { transform: skewX(-30deg) rotate(-60deg) skewX(-30deg); }
关于CSS3 匹配 3d 形状(立方体顶部),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13314596/