如何制作具有拉伸效果的3D元素? [英] How to make a 3D element with an extrude effect?
本文介绍了如何制作具有拉伸效果的3D元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个等距的10x10字段，
I created an isometric 10x10 field with:
transform : rotateX(60deg) rotateY(0deg) rotateZ(-45deg)
是否有任何可修改div"z-heigth"的属性，允许我为每个内部单元格赋予不同的深度"，从而创建一列?
Is there any property that modifies divs "z-heigth", allowing me to give each of the inner cells a different "depth", creating a column?
单元格和表格的当前代码:
Cell and Table current code:
#table {
width: 600px;
height: 600px;
background-color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg)
}
#table>DIV {
width: 58px;
height: 58px;
background-color: #ffffff;
border: 1px solid grey;
}<div id="table">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>推荐答案
您可以使用一些透视图和变换.不要忘记将 transform-style:preserve-3d; 添加到父元素
You can use some perspective and transform. Don't forget to add transform-style:preserve-3d; to the parent element
#table {
width: 600px;
height: 600px;
background-color: white;
display: flex;
flex-wrap: wrap;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
transform-style:preserve-3d; /* this is important */
}
#table > * {
width: 58px;
height: 58px;
background-color: pink;
border: 1px solid grey;
}
div:nth-child(50) {
transform:perspective(100px) translateZ(30px);
}
/* or without perspective */
div:nth-child(10) {
transform:translateZ(30px);
}<div id="table">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>就像下面一样，通过添加伪元素来创建墙"
Also like below by adding pseudo element to create 'walls'
#table {
width: 600px;
height: 600px;
background-color: white;
display: flex;
flex-wrap: wrap;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
transform-style:preserve-3d; /* this is important */
}
#table > * {
width: 58px;
height: 58px;
background-color: pink;
border: 1px solid grey;
}
div:nth-child(7n + 3) {
transform:translateZ(58px);
transform-style:preserve-3d; /* this is important */
}
div:nth-child(7n + 3)::before,
div:nth-child(7n + 3)::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:inherit;
border:inherit;
}
div:nth-child(7n + 3)::before {
transform-origin:left;
transform:rotateY(90deg);
}
div:nth-child(7n + 3)::after {
transform-origin:bottom;
transform:rotateX(90deg);
}<div id="table">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>要使其通用，我们可以添加一些CSS变量:
To make it generic we can add some CSS variables:
#table {
width: 600px;
height: 600px;
background-color: white;
display: flex;
flex-wrap: wrap;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
transform-style:preserve-3d; /* this is important */
}
#table > * {
width: 58px;
height: 58px;
background-color: pink;
border: 1px solid grey;
}
div[style*='--d'] {
transform:translateZ(var(--d));
transform-style:preserve-3d; /* this is important */
}
div[style*='--d']::before,
div[style*='--d']::after{
content:"";
bottom:0;
left:0;
position:absolute;
background:inherit;
border:inherit;
}
div[style*='--d']::before {
width:var(--d);
top:0;
transform-origin:left;
transform:rotateY(90deg);
}
div[style*='--d']::after {
height:var(--d);
right:0;
transform-origin:bottom;
transform:rotateX(90deg);
}<div id="table">
<div></div><div></div><div></div><div></div><div></div><div style="--d:150px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:70px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:20px;"></div><div></div><div></div><div></div><div></div><div style="--d:40px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:100px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
一些有趣的动画:
#table {
width: 600px;
height: 600px;
background-color: white;
display: flex;
flex-wrap: wrap;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
transform-style:preserve-3d; /* this is important */
}
#table > * {
width: 58px;
height: 58px;
background-color: pink;
border: 1px solid grey;
}
div[style*='--d'] {
transform:translateZ(var(--d));
animation:a 2s linear infinite alternate;
transform-style:preserve-3d; /* this is important */
}
div[style*='--d']::before,
div[style*='--d']::after{
content:"";
bottom:0;
left:0;
position:absolute;
background:inherit;
border:inherit;
animation:inherit;
}
div[style*='--d']::before {
width:var(--d);
top:0;
animation-name:c;
transform-origin:left;
transform:rotateY(90deg);
}
div[style*='--d']::after {
height:var(--d);
right:0;
animation-name:b;
transform-origin:bottom;
transform:rotateX(90deg);
}
@keyframes a {
from {
transform:translateZ(0);
}
}
@keyframes b {
from {
height:0px;
}
}
@keyframes c {
from {
width:0px;
}
}<div id="table">
<div></div><div></div><div></div><div></div><div></div><div style="--d:150px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:70px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:20px;"></div><div></div><div></div><div></div><div></div><div style="--d:40px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div style="--d:100px;"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>这篇关于如何制作具有拉伸效果的3D元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
