3D转换 --继续学习

本文详细介绍了CSS3的3D转换,包括translate3d、透视perspective、translateZ和3D旋转rotate3d。通过左手准则解释旋转方向,并提供了3D导航栏和旋转木马案例,同时探讨了transform-style属性对3D效果的影响以及浏览器私有前缀的使用。
摘要由CSDN通过智能技术生成

3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。

  • translform:translateX(100px):仅仅是在x轴上移动

  • translform:translateY(100px):仅仅是在Y轴上移动

  • translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位

  • transform:translate3d(x,yz):其中xy、z分别指要移动的轴的方向的距离

透视perspective即距离

在2D平面产生近大远小视觉立体,但是只要效果二维的

  • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)

  • 模拟人类的视觉位置,可认为安排一直眼睛去看

  • 透视我们也称为视距:视距就是人的眼睛到屏幕的距离

  • 距离视觉点越近的在电脑平面成像越大,越远成像越小

  • 透视的单位是像素

透视写在被观察元素的父盒子上面

    • d: 就是视距,视距就是一个距离人的眼睛到屏幕的距离

    • 就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大 反之 负值看到的物体越小

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值