如果我想取Z轴的50%为origin,应该怎么做
我们只知道一个div
的高和宽,但是不知道有多厚
。
在css中,我们可以这样写
div{
height: 100px;
width: 100px;
}
或者这样写
div{
height: 100%;
width: 100%;
}
我们决定了div的宽
和高
,但是,在z轴方向上,我们不能定义div的厚度
。也就是说div是二维的。
css中某些属性取值为百分比,需要一个参考点
。
宽和高的百分比都是以父节点为参考点
.out{
height: 100px;
width: 100px;
}
.inner{
height: 50%;
width: 50%;
}
<div class="out">
<div class="inner">宽和高都是父节点的一半(50px)</div>
</div>
而transform-origin百分比值是以自身
为参考点
div{
height: 200px;
width: 200px;
transform-origin-x: 100%; // 以自身(宽)为参考点,会向右移动200px(100%*200)
transform-origin-z: 100%; // 这个div到底有多厚,谁来告诉我,我改怎么办?
}
transform-origin
以及其他css属性都是应用在具体的节点
上,不是你弄一个3D的模型,然后对整个模型使用css属性。
所以,transform-origin-z
不能使用百分比值,要给一个具体的值。
X,y轴有极限值,就是容器本身;Z轴没有极限值所以没有50%;