章节
问答
课签
笔记
评论
占位
占位

3D变换的梳理

在圣诞主题中运用了不少的3D视角的效果,比如开窗、3d旋转,所以需要了解下css中3D变换是如何呈现出来的?

要想实现3D的效果,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果。不过有很多需要注意的地方
坐标系统的 z 轴同时与 x 和 y 轴垂直

1、3D视图

设置一个元素的transform-style:preserve-3d;只影响这个元素的子元素(如果孙元素也有3d效果,那么还必须给子元素设置preserve-3d)。这样所有子元素都可以相对与父元素的平面进行3d变形操作。和二维变形一样,三维变形可以使用transform属性来设置。可以通过制定的函数或者通过三维矩阵来对元素变型

可以呈现3d的属性有,translate3d、scale3d、rotateX、rotateY、rotateZ等等

2、透视/景深效果

perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代,而不是其元素本身。简单的来说就是假想下,当我们看一个房子的时候,比如房子有200米长,在房里里面与在房子外面,看到的角度都是不一样的,当设置perspective<200的时候,就是我们在房里看,如果perspective>200或者更多的时候,就相当在外面看,而且越远看房子的角度大小也就不一样

当元素没有设置perspective(length)时,所有后代元素被压缩在同一个二维平面上,不存在景深的效果。如果设置perspective(length)后,将会看到三维的效果。默认的透视视角中心在容器

总结:呈现3d效果需要3部分

  1.  父元素或者当前运动元素上设置透视角perspective,perspective属性的值决定了3D效果的强度
  2. 3D视图,设置在父元素上,子元素都可以相对与父元素的平面进行3d变形操作
  3. 3D变形函数,translate3d、scale3d、rotateX、rotateY、rotateZ等等

知识点挺多,可以查询相关具体的资料。参考右边的代码,便于理解

任务

在右边代码22行区域,给id为#card的元素设置rotateY为70的角度,形成3d的透视效果

?不会了怎么办

        -webkit-transform: rotateY(70deg);
        -moz-transform: rotateY(70deg);

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?