html - 具有非等距子项的 css 等距视图
问题描述
我transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
用来使元素看起来像是在等距透视图中。我想知道如何恢复某些孩子的效果,以便他们共享协调系统但正常对齐。我试图以同样的方式旋转孩子们,但它似乎工作不同。有任何想法吗?
.iso {
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
transform-style: preserve-3d;
position: relative;
height: 20rem;
width: 20rem;
text-align: center;
margin: 0 auto;
background-color: tomato;
box-sizing: border-box;
padding: 2rem;
}
.marker {
position: absolute;
left: 10rem;
top: 15rem;
transform: rotateX(-60deg) rotateY(0deg) rotateZ(45deg);
}
<div class="iso">
<h3>I'm also iso aligned</h3>
<div class="marker">
<svg xmlns='http://www.w3.org/2000/svg' height='30' width='27' viewBox='0 0 25 30'><path stroke="#FFFFFF" stroke-width="2" fill='29434e' d='M13.6363636,0.272727273 C16.6363636,0.272727273 19.6363636,1.63636364 21.8181818,3.81818182 C24,6.27272727 25.3636364,9 25.3636364,12.2727273 C25.3636364,15.5454545 24,19.0909091 21.8181818,21.2727273 L13.6363636,29.7272727 L5.45454545,21.2727273 C3.27272727,19.0909091 1.90909091,15.8181818 1.90909091,12.2727273 C1.90909091,9 3,6.27272727 5.45454545,3.81818182 C7.63636364,1.63636364 10.6363636,0.272727273 13.6363636,0.272727273 Z'/></svg></div>
</div>
解决方案
您应该更改它transform-origin
以使其底部然后使用相反的转换,如下所示。您不仅应该反转值,还应该反转顺序。
添加了一个额外的未转换的制造商来比较
.iso {
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
transform-style: preserve-3d;
position: relative;
height: 20rem;
width: 20rem;
text-align: center;
margin: 0 auto;
background-color: tomato;
box-sizing: border-box;
padding: 2rem;
}
.marker {
position: absolute;
left: 10rem;
top: 15rem;
transform: rotateZ(45deg) rotateY(0deg) rotateX(-60deg);
transform-origin:bottom center;
}
.compare {
position:absolute;
left: 15rem;
top: 10rem;
}
<div class="iso">
<h3>I'm also iso aligned</h3>
<div class="marker">
<svg xmlns='http://www.w3.org/2000/svg' height='30' width='27' viewBox='0 0 25 30'><path stroke="#FFFFFF" stroke-width="2" fill='29434e' d='M13.6363636,0.272727273 C16.6363636,0.272727273 19.6363636,1.63636364 21.8181818,3.81818182 C24,6.27272727 25.3636364,9 25.3636364,12.2727273 C25.3636364,15.5454545 24,19.0909091 21.8181818,21.2727273 L13.6363636,29.7272727 L5.45454545,21.2727273 C3.27272727,19.0909091 1.90909091,15.8181818 1.90909091,12.2727273 C1.90909091,9 3,6.27272727 5.45454545,3.81818182 C7.63636364,1.63636364 10.6363636,0.272727273 13.6363636,0.272727273 Z'/></svg></div>
</div>
<!-- to compare with -->
<svg class="compare" xmlns='http://www.w3.org/2000/svg' height='30' width='27' viewBox='0 0 25 30'><path stroke="#FFFFFF" stroke-width="2" fill='29434e' d='M13.6363636,0.272727273 C16.6363636,0.272727273 19.6363636,1.63636364 21.8181818,3.81818182 C24,6.27272727 25.3636364,9 25.3636364,12.2727273 C25.3636364,15.5454545 24,19.0909091 21.8181818,21.2727273 L13.6363636,29.7272727 L5.45454545,21.2727273 C3.27272727,19.0909091 1.90909091,15.8181818 1.90909091,12.2727273 C1.90909091,9 3,6.27272727 5.45454545,3.81818182 C7.63636364,1.63636364 10.6363636,0.272727273 13.6363636,0.272727273 Z'/></svg>
更好地理解顺序重要性的相关问题:
推荐阅读
- javascript - 如何将数据从 mysql 服务器发送到 node.js socket.io
- ios - 为什么我在swift中选择照片库时不显示照片库?
- php - 如何使用 mysql 和 php 开发足球运动员比较器?
- java - 后台失败时重启黄瓜测试
- javascript - 我该如何解决“找不到模块'./commands/${file}'”
- java - 将 Python 2D ndarray 加载到 Android 中以在 TFLite 上进行推理
- javascript - D3.js 错误:
属性变换:预期数字,“翻译(NaN,NaN)” - python - 如何在 Python 3 中加载多个 cog
- python - 使用 django 模型使用派生类的数据初始化基类
- bash - Bash 脚本;x.sh 脚本中的别名命令