css3 3d x y z 轴,3D变形 CSS3 transform---rotateX(), rotateY(), rotateZ(), 透-站长资讯中心

c4468b3f4df77e96b0a416fa2a870fba.png

3D变形 CSS3 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)

2d x y

3d x y z

左手坐标系

伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

e7f892346719e6ba14ee40eb742772b4.png

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180度,如下图

afc0973be020c1b2e92db442f2a36baf.png

简单记住他们的坐标:

x左边是负的,右边是正的

y 上面是负的, 下面是正的

z 里面是负的, 外面是正的

rotateX()

就是沿着 x 立体旋转.

5f50e6293aa164c074cf43d54e061e41.png

建议用代码运行下,自己感受即可理解

img{transition:all 0.5s ease 0s;

}img:hove{transform:rotateX(180deg);

}

rotateY()

沿着y轴进行旋转

c6b10f9972c870f9d788a4ef39a8e724.png

img{transition:all 0.5s ease 0s;

}img:hove{transform:rotateX(180deg);

}

rotateZ()

沿着z轴进行旋转

img{transition:all .25s ease-in 0s;

}img:hover{

/*transform:rotateX(180deg);*/

/*transform:rotateY(180deg);*/

/*transform:rotateZ(180deg);*/

/*transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg);*/

}

透视(perspective)

电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。

透视可以将一个2D平面,在转换的过程当中,呈现3D效果。

透视原理: 近大远小 。

浏览器透视:把近大远小的所有图像,透视在屏幕上。

perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置

注:并非任何情况下需要透视效果,根据开发需要进行设置。

perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素

理解透视距离原理:

d97359d7be460ec3eeb9f88fef02882d.png

原文链接:https://www.cnblogs.com/jane-panyiyun/p/11855508.html

如有疑问请与原作者联系

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com

特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值