我正在尝试使用 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;
}
很简单:
然后我使用 this handy tutorial 添加了一堆代表作品的 div。作为指南。如果您单击其中一个 div,它会向下翻。
但看起来,蓝灰色的 div 粘在了原始旋转的平面上。随着翻转的发生,顶部永远不会变大。如果我给它们任何类型的默认旋转,它们似乎不会从平面中出来并坐直:
这是 live example .
我是 CSS 3D 转换的新手,我想这是一件简单的事情。我想基本上我想要的是级联旋转?非常感谢。
最佳答案
所以基本上你需要的是一个透视中的透视。
它可以完成,但它不会给出逼真的外观。
我在上面的 fiddle 中所做的是:
改为将子元素设置为兄弟元素
<div class="board"></div>
<div class="card">
<figure class="front"></figure>
<figure class="back"></figure>
</div>
这是您可以分别看待他们两个的观点。
为避免设置双重透视,您可以简单地添加一个父 div 并在那里设置透视,因为它将在子元素中保持透视。
关于css - 复合透视与 CSS 3d 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28226121/