写点什么

css3 中的 3D 转换效果有哪些,浏览器私有前缀兼容写法

发布于: 刚刚
css3中的3D转换效果有哪些,浏览器私有前缀兼容写法

html5/css3 基础篇(第三篇)

回顾

这次基本上是 html5/css3 最后的一部分内容了,一共 h5c3 分为了三讲,今天是最后一讲内容。回顾上一篇我们基本上学习了 css3 中一大部分的内容,我们学习了基于 transform 的移动、旋转、缩放等常用的效果,还掌握了 css3 2D 转换的综合写法,不仅如此还学习了 animation 动画效果,这些都是为 css3 实现更为酷炫的效果而学习的内容,而且也为 css 添加了很多可扩展的技能。看知识总是比较散漫的,如果想烂熟于心还是需要多加练习。

3D 转换概述

3D 在现在看来是十分普遍的存在,不管是应用到技术上来说还是应用到现实生活中的场景,都离不开 3D 效果的实现。在 c3 中也出现 3D 的效果,想要实现 3D 效果一般分为两种特点:


  1. 近大远小

  2. 物体后面遮挡不可见


还有一点就是三维坐标系


  • X 轴:水平向右。注意:X 右边是正值,左边是负值

  • Y 轴:垂直向下。注意:Y 下面是正值,上面是负值

  • Z 轴:垂直屏幕。注意:往外面是正值,往里面是负值以上是 3D 中基本的概述,了解完这些基本的概述之后,我们可以尝试学习了 css3 中 3D 的位移

3D 转换学习内容——位移

  1. 3D 位移:translate(x, y, z)

  2. transform: translateX(100px); —— 仅仅在 x 轴上移动 100px

  3. transform: translateY(100px); —— 仅仅在 y 轴上移动 100px

  4. transform: translateZ(100px); —— 仅仅在 z 轴上移动 100px

  5. transform: translate3D(x, y, z); —— 其中 xyz 分别指要移动的轴方向的距离


需要注意的是在 transform:translate 中如果一个一个写的话,下面内容会覆盖上面的内容 例如:


transform:translateX(100px)// y 会覆盖 xtransform: translateY(100px)
复制代码


例如上面的代码,你肯定想的是将盒子的 x 移动 100px,再将盒子的 y 轴移动 100px,实际上 y 覆盖了 x 最后的效果仅仅是将 y 轴移动了 100px,如果想达到这种效果的话,需要简写形式


// 如果没有值的话可以写0代替// 这样的效果就是 x、y轴移动了 100px,Z轴不动transform: translate3D(100px, 100px, 0)
复制代码


注意:想要实现 3D 效果的移动还需要将父盒子中加一个透视才能达到这样的效果。如下图


原始效果



呈现的 3D 效果



3D 转换学习内容——透视

透视:perspective


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

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

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

  4. 距离视觉点越近的在电脑平面成像越大,越远城乡越小

  5. 透视的单位是像素


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


可以理解这种就是透视产生的效果 如下图



3D 转换学习内容——旋转

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


语法:


  1. transform: rotateX(45deg); —— 沿着 X 轴正方向旋转 45 度

  2. transform: rotateY(45deg); —— 沿着 y 轴正方向旋转 45 度

  3. transform: rotateZ(45deg); —— 沿着 z 轴正方向旋转 45 度

  4. transform: rotate3d(x, y, z, deg); —— 沿着自定义轴旋转 deg 为旋转角度如下图所示


初始状态:



旋转之后:



3D 呈现

3D 呈现:transform-style


  1. 控制子元素是否开启三维立体环境

  2. transform-style: flat —— 子元素不开启 3d 立体控件 默认的

  3. transform-style: preserve-3d —— 子元素开启立体控件

  4. 代码写给父级,但是影响的是子盒子

  5. 这个属性很重要,以后会用到

浏览器私有前缀

私有前缀:


  • -moz-:代表 firefox 浏览器私有前缀

  • -ms-:代表 ie 浏览器私有前缀

  • -webkit-:代表 safari、chrome 私有前缀

  • -0-:代表 opera 私有前缀


提倡的兼容性写法:


// 兼容 -moz- 写法-moz-border-radius: 10px;
// 兼容 -ms- 写法-ms-border-radius: 10px;
// 兼容 -webkit- 写法-webkit-border-radius: 10px;
// 兼容 -o- 写法-o-border-radius: 10px;
复制代码

结束

好了,今天 css3 中的 3D 效果基本上就了解完了,下去自己可以在编辑器中写点小 demo 尝试一下,到现在 h5c3 基本上就结束了。自己可以好好的练习练习。接下里我们就要开启一些布局的内容,例如:flex 布局,rem、em 布局等内容。


大鹏一日同风起,扶摇直上九万里

发布于: 刚刚阅读数: 3
用户头像

还未添加个人签名 2019.09.04 加入

普及从学校到工作怎么快速转变,更高效学习前端知识及后续发展趋向,更好快速的融入到工作中 关注公号:前端史塔克

评论

发布
暂无评论
css3中的3D转换效果有哪些,浏览器私有前缀兼容写法