是否可以使用CSS HTML和JavaScript在B上的A,C上的B,C上的C?

像这样 :

javascript - 是否可以使用CSS HTML和JavaScript在B上的A,C上的B,C上的C?-LMLPHP

最佳答案

目前,只有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个不同的元素

09-10 05:04
查看更多