3D的转化

我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。

特点:

  • 近大远小;
  • 物体后面遮挡不可见。

当我们在网页上构建3D效果的时候参考这些特点就能产生3D效果。

三维坐标系 

三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。

  • x轴:水平向左 注意:x右边是正值,左边是负值
  • y轴:垂直向下 注意:y下面是正值,上面是负值
  • z轴:垂直屏幕 注意:往外面是正值,往里面是负值

3D移动translate3d

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

  • transform: translateX(100px);:仅仅是在x轴上移动;
  • transform: translateY(100px);:仅仅是在y轴上移动;
  • transform: translateZ(100px);:仅仅是在z轴上移动(注意:translateZ一般用px单位);
  • transform: translate3d(x,y,z);:其中x y z分别指要移动的轴的方向的距离。(x y z是不能省略的 如果没有就写0)

透视perspective

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

  • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内);
  • 模拟人类视觉位置,可认为安排一只眼睛去看;
  • 透视我们也称为视距:视距就是人的眼睛到屏幕的距离;
  • 距离视觉点越近的在电脑平面成像越大,越远成像越小;
  • 透视的单位是像素。

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

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

z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大。

translateZ

transform:translateZ(100px):仅仅是在Z轴上移动。有了透视,就能看到translateZ引起的变化了

3D转换rotate3D

3D旋转可以让元素在三维平面沿着x轴,y轴,z轴或者自定义轴进行旋转。

语法:

  • transform:rotateX(45deg):沿着X轴正方向旋转45度;
  • transform:rotateY(45deg):沿着Y轴正方向旋转45度;
  • transform:rotateZ(45deg):沿着Z轴正方向旋转45度;
  • transform:rotate3d(x,y,z,deg):沿着自定义轴正方向旋转 deg为角度(了解即可)。

3D呈现transform-style

  • 控制元素是否开启三维立体环境;
  • transform-style:flat 子元素不开启3d立体空间 默认的
  • transform-style:preserve-3d;子元素开启立体空间;
  • 代码写给父级,但是影响的是子盒子;
  • 这个属性很重要,后面必用。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值