css3 perspective与translateZ变换

css3 perspective与translateZ变换_第1张图片
css3中的坐标系,rotateX就是绕着x轴旋转,rotateY就是绕着Y轴旋转,rotateZ就是绕着z轴旋转(也就是xy平面的旋转)。

perspective属性用来设置视点,在css3的模型中,视点是在Z轴所在方向上的。

translateX,translateY表现出在屏幕中的上下左右移动,transformZ的直观表现形式就是大小变化,实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近,在这里参照物就是perspective属性)。比如设置了perspective200px;那么transformZ的值越接近200,就是离的越近,看上去也就越大,超过200就看不到了,因为相当于跑到后脑勺去了,你不可能看到自己的后脑勺。(200-transformZ的值)就是视点和xy平面的距离(初始是屏幕的位置,此时transformZ的值为0)。

需要注意的一点是,整个坐标系中各各坐标轴的相对关系是固定的。正常情况下,视点和我们的眼睛是同一个方向的如同上面所讲。而当执行如rotateX(90deg)等旋转变换时,zy平面旋转,z轴和y轴的指向也会变化90度。此时z轴指向上方,视点也是在上方,此时我们从屏幕上看的就不是直观的元素大小变化,而是元素的升降变化,好像站在远处在看一部电梯或者你把书本平放举过头顶或下放那样。


<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>
<div style="perspective:300px"><img src="images/a9.png" style="transform:rotateX(90deg)">div>
<div style="perspective:300px"><img src="images/a9.png" style="transform:rotateX(90deg) translateZ(60px)">div>
<div style="perspective:300px"><img src="images/a9.png" style="transform:rotateX(90deg) translateZ(-60px)">div>
body>
html>

perspective属性用在容器上时,容器内每个元素的表现形式会不一样。当perspective属性用再容器内每个元素身上时,会根据各自的设置值进行表现。打个比方就是你一个人平视盒子里的10个鸡蛋和十个你每人看1个一模一样鸡蛋。

你可能感兴趣的:(HTML5+CSS,CSS3)