用CSS 3D变换合并视角

Question

用CSS 3D变换合并视角

4

我将尝试使用3D CSS构建一个简单的游戏，其结构类似于“Stratego”或任何其他具有竖直卡片的游戏，这些卡片会被推倒。设置游戏板的透视图很容易：

<div id="table">
  <div id="board"></div>
</div>

使用CSS：

#table {
  perspective: 1000px; 
  perspective-origin: 50% 50px;
  margin: 0 auto;
  width: 500px;
  height: 500px;
}

#board {
  transform: rotateX(50deg);
  background-color: pink;
  width: 500px;
  padding: 10px;
}

非常简单：

在此输入图片描述

然后我添加了一堆表示各个部分的div，使用这个便捷的教程为指南。如果您单击其中一个div，则它会向下翻转。

但是蓝色和灰色的div似乎卡在原始旋转平面上。随着翻转的发生，顶部永远不会变大。如果我给它们任何默认旋转，它们似乎都不会离开平面并保持竖立：

在此输入图片描述

这是实时示例。

我对CSS 3D转换很陌生，我认为这是一个简单的问题。本质上，我想要的是级联旋转，我觉得？非常感谢。

- Chris Wilson

2个回答

0

试试这个：

.card-container .card.flipped {
  transform: rotateX(180deg);
  transform-origin:top
 }

我建议尝试为卡片设置边框，这样可能会呈现更好的效果。

- maioman

很遗憾，没有运气。但是无论什么解决方案，在卡片“竖立”时也需要有价值。这张卡片需要从屏幕中弹出，可以这么说。 - Chris Wilson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Persijn · Accepted Answer

Fiddle/

基本上你需要的是透视中的透视。
虽然可以实现，但不会给人以真实感。我在上面的范例中所做的是：
将子元素设置为兄弟元素

<div class="board"></div>
<div class="card">
    <figure class="front"></figure>
    <figure class="back"></figure>
</div>

这样你就可以分别看待它们两个。
为了避免设置双重视角，您只需添加一个父 div 并在那里设置视角，因为它将在子元素中保持视角。