我在HTML,CSS方面有基本的知识。我想用这样的3个3D长方体创建一个HTML页面
上图中的3D立方体看起来很复杂。所以有人建议如何用HTML和CSS创建这个3D长方体
要创建第一个长方体,我试过这个:
<div class="box1">
<div>step 1</div>
<div>Your Title</div>
<div></div>
</div>
我在主div
内添加了3 div
代表长方体的面。以下是css:
.box1 {
margin:50px;
display:flex;
width:300px;
height:100px;
perspective: 300px;
font-size:30px;
line-height:100px;
color:#000;
text-align:center;
font-family:arial;
}
.box1 > div:first-child{
width:30%;
background:linear-gradient(to right,#008ec2b0,#085c6d);
transform: rotateY(-30deg);
transform-origin: right;
}
.box1 > div:last-child {
width:60%;
background:linear-gradient(to right,,#15a5c4,#4dca75);
transform: rotateY(-30deg);
transform-origin: right;
}
.box1 > div:not(:first-child):not(:last-child) {
width:60%;
background:linear-gradient(to right,#008ec2b0,#085c6d);
border-left:1px solid #fff;
transform-origin: left;
transform: rotateY(180deg);
}
但无法对齐长方体的底部
答案 0 :(得分:2)
您可以使用透视和变换来创建此类形状。
以下是第二个框的示例:
.box {
margin:50px;
display:flex;
width:300px;
height:100px;
perspective: 300px;
font-size:30px;
line-height:100px;
color:#fff;
text-align:center;
font-family:arial;
}
.box > div:first-child {
width:60%;
background:linear-gradient(to right,#f57300,orange);
transform: rotateY(-30deg);
transform-origin: right;
}
.box > div:last-child {
width:40%;
background:linear-gradient(to right,orange,#e53800);
border-left:1px solid #fff;
transform-origin: left;
transform: rotateY(30deg);
}
&#13;
<div class="box">
<div>Your Title</div>
<div>30</div>
</div>
&#13;
对于第一个和第三个,您可以考虑使用伪元素来获得第三个面并添加一些skew
变换以获得完美的形状。
这是第三个框的示例
.box {
margin:50px;
display:flex;
width:300px;
height:100px;
perspective: 300px;
font-size:30px;
line-height:100px;
color:#fff;
text-align:center;
font-family:arial;
position:relative;
}
.box > div:first-child {
width:60%;
background:linear-gradient(to right,#f57300,orange);
transform: rotateY(-30deg) skewY(9deg);
transform-origin: right;
}
.box > div:last-child {
width:40%;
background:linear-gradient(to right,orange,#e53800);
border-left:1px solid #fff;
transform-origin: left;
transform: rotateY(30deg) skewY(-9deg);
}
.box:before {
content: "";
position: absolute;
top: -27px;
width: 41%;
left: 50px;
height: 16px;
background: linear-gradient(to right,orange,#e53800);
transform: rotate(4.6deg) skewX(-80deg);
transform-origin: left bottom;
}
&#13;
<div class="box">
<div>Your Title</div>
<div>30</div>
</div>
&#13;
以下是第一个
的示例
.box {
margin:50px;
display:flex;
width:300px;
height:100px;
perspective: 300px;
font-size:30px;
line-height:100px;
color:#fff;
text-align:center;
font-family:arial;
position:relative;
}
.box > div:first-child {
width:60%;
background:linear-gradient(to right,#f57300,orange);
transform: rotateY(-30deg) skewY(-9deg);
transform-origin: right;
}
.box > div:last-child {
width:40%;
background:linear-gradient(to right,orange,#e53800);
border-left:1px solid #fff;
transform-origin: left;
transform: rotateY(30deg) skewY(9deg);
}
.box:before {
content: "";
position: absolute;
top: 91px;
width: 29%;
left: 50px;
height: 22px;
background: linear-gradient(to right,orange,#e53800);
transform: rotate(4.6deg) skewX(-80deg);
transform-origin: left bottom;
}
&#13;
<div class="box">
<div>Your Title</div>
<div>30</div>
</div>
&#13;
答案 1 :(得分:0)
您好我刚刚做了一个小例子,让您知道如何在css html中使用透视图。
https://jsfiddle.net/ty820kbh/1
您可以更改CSS中每个面的宽度和高度(保持连贯)并添加所需的样式,然后您可以修改.wrapper
的透视图以在您希望的视图中显示您的长方体。