是否可以使用CSS HTML和JavaScript在B上的A,C上的B,C上的C?
像这样 :
最佳答案
目前,只有Chrome浏览器支持transform样式:在像素级别(而不是元素级别)上保持3d。由于它是在像素级别完成的,因此该元素的某些部分可以在另一个元素的前面渲染,而某些部分可以在后面渲染。
body {
transform-style: preserve-3d;
}
div {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
position: absolute;
transform-style: preserve-3d;
}
.A {
background-color: tomato;
left: 50px;
top: 0px;
transform: rotateY(3deg); /* this does the trick */
}
.B {
background-color: lightgreen;
left: 50px;
top: 0px;
transform: rotate(120deg);
transform-origin: center bottom;
}
.C {
background-color: lightblue;
left: 50px;
top: 0px;
transform: rotate(-120deg);
transform-origin: center bottom;
}
<div class="A">Some fancy text</div>
<div class="B">Some fancy text</div>
<div class="C">Some fancy text</div>
因此,目前,您将只能使用技巧-基本上将元素之一呈现为2个不同的元素