更新时间:2022-02-26 07:33:20
根据您的HTML,我得到此JSFiddle .我只是玩了 transform
.
According to your HTML, I get this JSFiddle. I just played with transform
.
.mainDiv{
position: relative;
width: 206px;
height: 190px;
margin: 0px auto;
margin-top:100px;
}
.square{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: skew(180deg,210deg);
position: absolute;
top: 43px;
}
.square2{
width:100px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: skew(180deg,150deg);
position: absolute;
left:102px;
top: 43px;
}
.square3{
width:114px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: 0px;
top: -32px;
}
<div class="mainDiv">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
更新了CSS
.square3{
width:114px;
height:100px;
background:#c52329;
border:solid 2px #FFF;
transform: rotate(150deg) translate(-40px, -16px) skew(30deg, 0deg);
position: absolute;
left: 0px;
top: -32px;
}
我用此更改了转换CSS.
I changed transform CSS with this.
其他:大卫·沃尔什(David Walsh)在立方体上有一个很酷的动画版本.除了看起来很酷之外,通过摆弄设置,您可以学到很多东西.
Extra: David Walsh has a cool animated version on an cube. Apart from the fact that it looks kinda cool, by fiddling with the settings you can learn quite a lot about it.