第一个问题: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%;
,同时先添加transform
translateX(-50%)
。这样无论屏幕大小如何,都能使阴影集中在X轴上。既然你使用flex
,最好一起使用。为了使它从底部响应,我使用了bottom: calc(50% - 2em - 20px);
(2em是立方体的高度,20px是浮动)。对于文本,将其 Package 在
<span>
中,然后使用CSS将其居中,并使用transform: rotateY(180deg);
翻转反转的divs
的文本。第一个