美文网首页
六、3D变换

六、3D变换

作者: yuzhan550 | 来源:发表于2019-12-08 22:13 被阅读0次

1. perspective,灭点:

景深的写法:

a. 一种css属性;
b. 一种是transform属性的一个变换函数(必须在第一位)

景深的作用:

构建3D舞台,决定用户的肉眼距离屏幕的水平距离,使3D变换的元素具有近大远小的感觉。

景深和灭点的关系:

景深越大,灭点越远,元素变形越小
景深越小,灭点越近,元素变形越大

景深基点

景深叠加

景深是一个不可继承的属性,但可以作用于所有后代元素
transform-style
transform-style的作用:
构建3D舞台,使3D舞台有层次感
transform-style是一个不可继承属性,它只作用于子元素
backface-visiblility
隐藏元素背面
一个元素分两面,但并不意味元素有厚度,在一个状态下,元素只能展现自己的一面

相关文章

  • 六、3D变换

    1. perspective,灭点: 景深的写法: a. 一种css属性;b. 一种是transform属性的一个...

  • 一篇文章带你了解CSS3 3D 转换知识

    CSS3 3D变换功能允许在3D空间中变换元素。 一、元素的3D转换 使用CSS3 3D变换功能,可以对三维空间中...

  • 一篇文章带你了解CSS3 3D 转换知识

    CSS3 3D变换功能允许在3D空间中变换元素。 一、元素的3D转换 使用CSS3 3D变换功能,可以对三维空间中...

  • iOS 动画二十二: Simple 3D Animations

    Simple 3D Animations 主要代码: 注 1:3d变换其实是一个矩阵变换: 利用 CATransf...

  • 2019-06-11

    CSS3 2d变换 3d变换 css3 2d变换 111111 222222

  • transform变换

    transform变换 1. 变换属性 transform 变换分为2D变换和3D变换,描述的是一种变化之后的结果...

  • CSS3 Transform变形(3D转换)

    CSS3 3D 转换 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功...

  • 05、CSS3-3D变换和动画

    一、3D变换 transform-style建立3D空间 perspective 景深 perspective- ...

  • CSS3动画

    CSS3之2D/3D动画 2D的变换3D的变换动画 2D动画的变换 基本说明 注意:一般要写不同浏览器的适配 移动...

  • 3D变换

    之前我们学过2D变换,今天一起来学习一下3D变换,想到3D,我么会想到一个立体的空间。那么第一步,我们需要搭建一个...

网友评论

      本文标题:六、3D变换

      本文链接:https://www.haomeiwen.com/subject/ayjvgctx.html