3D变换

作者: 雅玲哑铃 | 来源:发表于2017-09-13 20:39 被阅读28次

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

<div class="wrap">
<div class="box">
<div class="redDiv">1</div>
<div class="blueDiv">2</div>
</div>
</div>

最外面的.wrap我们看做景深层,并给景深层设置景深,景深的意思就是我们眼睛离屏幕的距离perspective:1600px;
中间的.box我们将设置3D的变换区transform-style: preserve-3d;
最里面的div我们将参照.box来进行3D变换,比如绕X轴/Y轴/Z轴旋转一定角度,相对于X轴/Y轴/Z轴进行位置变换,以及缩放比例,因此我们知道transform属性可以设置3个属性值,分别为translate rotate scale

相关文章

  • 一篇文章带你了解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变换

网友评论

    本文标题:3D变换

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