第一个问题：1.我想将不同的文本添加到立方体的表面（第1、2、3、4个）（欢迎）（到）（主）（页面）1.另外，立方体下面的阴影没有居中，我怎么才能居中呢？1.最后，我也无法将魔方移动到更高的位置，我该如何解决这些问题呢？视觉效果如下：
bfnvny8b1#
为了“移动”立方体，你的div应该有比例。我在你的立方体上插入了width: 2em;和height: calc(2em + 20px);。由于阴影，我在高度上增加了20px，你可能想显示它“悬停”。要使阴影居中，你需要使用left: 50%;，同时先添加transformtranslateX(-50%)。这样无论屏幕大小如何，都能使阴影集中在X轴上。既然你使用flex，最好一起使用。为了使它从底部响应，我使用了bottom: calc(50% - 2em - 20px);（2em是立方体的高度，20px是浮动）。对于文本，将其 Package 在<span>中，然后使用CSS将其居中，并使用transform: rotateY(180deg);翻转反转的divs的文本。第一个
width: 2em;
height: calc(2em + 20px);
left: 50%;
transform
translateX(-50%)
flex
bottom: calc(50% - 2em - 20px);
<span>
transform: rotateY(180deg);
divs
1条答案
按热度按时间bfnvny8b1#
为了“移动”立方体，你的div应该有比例。我在你的立方体上插入了
width: 2em;和height: calc(2em + 20px);。由于阴影，我在高度上增加了20px，你可能想显示它“悬停”。要使阴影居中，你需要使用
left: 50%;，同时先添加transformtranslateX(-50%)。这样无论屏幕大小如何，都能使阴影集中在X轴上。既然你使用flex，最好一起使用。为了使它从底部响应，我使用了bottom: calc(50% - 2em - 20px);（2em是立方体的高度，20px是浮动）。对于文本，将其 Package 在
<span>中，然后使用CSS将其居中，并使用transform: rotateY(180deg);翻转反转的divs的文本。第一个