Html 使用css的伪3d
情况如下: 我有一个父视图,它有一个三维变换。在它上面我有几个元素(让我们从现在起称它们为对象),它们在变换时看起来像贴纸(也就是说,它们没有边缘)。我希望这些对象看起来像是在视图上(假设父视图是一个表,元素是硬币/盘子等) 我的第一个想法是将子元素插入这些对象并旋转90度(见图),但我似乎无法实现(我不太擅长css)。有人能帮我吗 基本上,我想要类似的东西,但我只需要1和6。我试图切断逻辑,但是。当我尝试向立方体添加旋转时,元素会挤压,而不是表现为3d元素:Html 使用css的伪3d,html,css,Html,Css,情况如下: 我有一个父视图,它有一个三维变换。在它上面我有几个元素(让我们从现在起称它们为对象),它们在变换时看起来像贴纸(也就是说,它们没有边缘)。我希望这些对象看起来像是在视图上(假设父视图是一个表,元素是硬币/盘子等) 我的第一个想法是将子元素插入这些对象并旋转90度(见图),但我似乎无法实现(我不太擅长css)。有人能帮我吗 基本上,我想要类似的东西,但我只需要1和6。我试图切断逻辑,但是。当我尝试向立方体添加旋转时,元素会挤压,而不是表现为3d元素: #cube .bottom {
#cube .bottom {
background: none repeat scroll 0% 0% rgba(254, 0, 255, 0.7);
}
#cube figure {
display: block;
position: absolute;
width: 196px;
height: 196px;
border: 2px solid black;
line-height: 196px;
font-size: 120px;
font-weight: bold;
color: white;
text-align: center;
}
figure {
margin: 0px;
}
#cube.panels-backface-invisible figure {
backface-visibility: hidden;
}
#cube .front {
transform: translateZ(100px);
}
#cube .front {
background: none repeat scroll 0% 0% rgba(255, 0, 0, 0.7);
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s ease 0s;
transform: translateZ(-100px) rotateX(90deg);
}
#cube.show-front {
transform: translateZ(-100px);
}
以及html:
<div id="cube" class=" panels-backface-invisible show-front">
<figure class="front">
1
</figure>
<figure class="bottom">
6
</figure>
</div>
1.
6.
您是否有一些基本示例?你想让这些对象设置成90度的动画还是在90度时保持静止?基本上,我想要这样的->,但我只需要1和6。我试图切断逻辑,但我做不到->当我尝试向立方体添加旋转时,元素挤压,而不是像这样表现为3d元素->示例使用modernizer脚本,但使用transform属性是关键this@jbyrne2007,好的,我会看一遍。谢谢