CSS 每个元素的视角

Question

我正在使用一张卡片列表，单击这些卡片可以翻转以显示其他信息。我想添加一些视角让它看起来更漂亮。

我的问题是，要为列表提供一些视角，我需要将视角附加到 ul 元素。然后原点由父级的大小定义，这使得中间的元素在没有透视的情况下转动，而顶部和底部的元素以非常丑陋的方式变形。

有没有办法让每个元素都有自己的视角以获得流畅的 3D 外观，最好不用 JavaScript？

ul {
  perspective: 600px;
}
li {
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: lightgrey;
  transition: all .3s ease;
}
li:hover {
  transform: rotateY(180deg);
}

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>

</body>

Answer 1

试试这个

ul {
  perspective: 600px;
}
li {
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: lightgrey;
  transition: all 2s ease-out;
}
li:hover {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

Answer 2

我的想法是在每个 li 中设置内部容器，即 <span>，并保持 li 静态，转换内部元素：

ul {
  -webkit-perspective: 600px;
  perspective: 600px;
}
li {
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 5px;
}
li span {
  display: block;
  height: 100%;
  background-color: lightgrey;
  transition: all .3s ease;
}
li:hover span {
  transform: rotateY(180deg);
}

<body>
 <ul>
  <li><span>1</span></li>
  <li><span>2</span></li>
  <li><span>3</span></li>
  <li><span>4</span></li>
  <li><span>5</span></li>
  <li><span>6</span></li>
  <li><span>7</span></li>
 </ul>

</body>

Answer 3

Is there a way to give each element it's own perspective

我不知道我是否正确理解了你的问题，但我认为下面是你要查找的内容。通过将 perspective 值与 transform 属性一起提供，您可以直接将其提供给每个元素（而不是像设置时那样创建 3d space perspective 属性 ul).

这意味着每个元素无论是第一个还是中间还是最后一个都会以与另一个相同的方式旋转。

视角也应用于 un-hovered 或默认状态（li 选择器），因为反向转换也应该正确发生。如果未设置，(a) 在悬停期间将无法正确应用透视图，并且 (b) 有时它会在快速 hover-in-out.

期间导致抖动

您可以在 this CSS Tricks article 中找到更多信息。正如您在此处的演示中看到的那样，当直接将视角分配给子级时，每个子级看起来都一样，这与应用于父级时不同。

(注意： (1) 我已经为演示稍微改变了过渡持续时间。(2) 你必须玩弄透视值以获得您正在寻找的确切效果。我会把调整留给您。)

li {
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: lightgrey;
  transition: all 1s ease;
  transform: perspective(125px) rotateY(0deg);
}
li:hover {
  transform: perspective(125px) rotateY(180deg);
}

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>

</body>

CSS 每个元素的视角

CSS perspective for each element

css

3d

flip

perspective