admin管理员组文章数量:1530828
css3中的坐标系,rotateX
就是绕着x轴旋转,rotateY
就是绕着Y轴旋转,rotateZ
就是绕着z轴旋转(也就是xy
平面的旋转)。
perspective
属性用来设置视点,在css3的模型中,视点是在Z轴所在方向上的。
translateX,translateY
表现出在屏幕中的上下左右移动,transformZ
的直观表现形式就是大小变化,实质是XY
平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近,在这里参照物就是perspective
属性)。比如设置了perspective
为200px
;那么transformZ
的值越接近200,就是离的越近,看上去也就越大,超过200
就看不到了,因为相当于跑到后脑勺去了,你不可能看到自己的后脑勺。(200-transformZ
的值)就是视点和xy平面的距离(初始是屏幕的位置,此时transformZ
的值为0
)。
需要注意的一点是,整个坐标系中各各坐标轴的相对关系是固定的。正常情况下,视点和我们的眼睛是同一个方向的如同上面所讲。而当执行如rotateX(90deg)
等旋转变换时,zy
平面旋转,z轴和y轴的指向也会变化90
度。此时z轴指向上方,视点也是在上方,此时我们从屏幕上看的就不是直观的元素大小变化,而是元素的升降变化,好像站在远处在看一部电梯或者你把书本平放举过头顶或下放那样。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{margin:30px;width:auto;display:inline-block;}
div img{width:280px;}
</style>
</head>
<body>
<div><img src="images/a9.png"></div><!--正常放置,无变化-->
<div style="perspective:300px"><img src="images/a9.png" style="transform:translateZ(40px)"></div><!--z轴朝着屏幕,图片推向你所在的方向-->
<div style="perspective:300px"><img src="images/a9.png" style="transform:rotateX(90deg)"></div><!--Z轴朝天,视点在Z轴方向上-->
<div style="perspective:300px"><img src="images/a9.png" style="transform:rotateX(90deg) translateZ(60px)"></div><!--Z轴朝天,视点在Z轴方向上,朝视点推进,图片上升-->
<div style="perspective:300px"><img src="images/a9.png" style="transform:rotateX(90deg) translateZ(-60px)"></div><!--Z轴朝天,视点在Z轴方向上,朝视点远离,图片下降-->
</body>
</html>
perspective
属性用在容器上时,容器内每个元素的表现形式会不一样。当perspective
属性用再容器内每个元素身上时,会根据各自的设置值进行表现。打个比方就是你一个人平视盒子里的10
个鸡蛋和十个你每人看1
个一模一样鸡蛋。
本文标签: perspectivetranslateZ
版权声明:本文标题:css3 perspective与translateZ变换 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725894755a1047498.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论