CSS3三维变形,其实很简单!

HTML5学堂:空间的变化一直是视觉感官上最吸引人的东西,而如果要把这些空间上的变化用代码在浏览器上实现出来,就需要深入的来了解CSS3的transform 3D变化了。作为前端开发者,在这方面肯定是需要迎难而上的。本文就是以之前的二维变形为基础,为大家带来三维空间上的一些形变制作。

本文主要内容

一、前言

二、坐标轴系统

三、透视与变形风格

四、3D变形函数

五、实例展示

六、总结

一、前言

所谓的三维变形,无外乎就是在二维平面的基础上进而实现三维立体空间的形变。上两周我们详细的讲解了二维变形的相关操作,本文将详细的介绍关于transform3D变形的内容,但是仍然以2D变形为基础。期中3D变形还涉及到的属性有transform、transform-style、perspective。

二、坐标轴系统

在了解其他相关的操作之前,首先要了解的是三维坐标系统。3D变形与2D变形的最大不同就在于其参考的坐标轴不同,2D变形的坐标轴是平面的,只存在X轴和Y轴,而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间,X轴正向是朝右,Y周正向是朝下,Z轴正向是朝屏幕外。如下图:

三、透视与变形风格

1、透视perspective

透视是transform变形3D中最重要的内容。如果不设置透视,元素的3D变形效果将无法实现。为此需要使用到这样的一个属性——perspective。

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置,并将可视内容映射到一个视面上,继而投到一个2D视平面上。如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并且变换结果中将不存在景深概念。

上面的描述可能让人难以理解一些,其实对于perspective属性,可以简单的理解为视距,用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定,值越小,用户与3D空间Z平面距离越近,视觉效果更令人印象深刻;反之,值越大,用户与3D空间Z平面距离越远,视觉效果就很小。

其取值的情况如下:

  1. 透视perspective不可为0和负数,因为观察者与屏幕距离为0时或者在屏幕背面时是不可以观察到被透视元素的正面的。
  2. 透视perspective不可取百分比,因为百分比需要相对的元素,但z轴并没有可相对的元素尺寸。

解释:一般地,物体离得越远,显得越小。反映在perspective属性上,就是该属性值越大,元素的3d效果越不明显。

注意:设置透视perspective属性的元素就是被透视元素。一般地,该属性只能设置在变形元素的父级或祖先级。因为浏览器会为其子级的变形产生透视效果,但并不会为其自身产生透视效果。

2、风格transform-style

transform-style属性是3D空间的一个重要属性,指定嵌套元素如何在3D空间中呈现,主要有两个属性值:flat和preserve-3d。

transform-style属性的使用语法非常简单:

  1. transform-style: flat | preserve-3d;

其中flat值为默认值,表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

也就是说,如果对一个元素设置了transform-style的值为flat,则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上,而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d,它表示不执行平展操作,他的所有子元素位于3D空间中。

四、3D变形函数

三维变形使用基于二维变形的相同属性,如果熟悉二维变形,会发现三维变形的功能和二维变形的功能相当类似。CSS3中的三维变形主要包括以下几种功能函数:

  1. 3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数;
  2. 3D旋转:CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数;
  3. 3D缩放:CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数;

1、3D位移

在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是,使用三维向量的坐标定义元素在每个方向移动多少。

随着px的增加,直观效果上:

  1. X:从左向右移动;
  2. Y:从上向下移动;
  3. Z:以原位置中心为原点,变大。

从直观效果上会发现(后续案例中),当z轴值越大时,元素也离观看者更近,从视觉上元素就变得更大;反之其值越小时,元素也离观看者更远,从视觉上元素就变得更小。

2、3D旋转

在三维变形中,可以让元素在任何轴旋转。为此,CSS3新增三个旋转函数:rotateX()、rotateY()和rotateZ()。

随着度数的增加,直观效果上:

  1. X:以方框X轴,从下向上旋转;
  2. Y:以方框y轴,从左向右旋转;
  3. Z:以原位置中心为原点,顺时针旋转。

除了上述的几个属性值以外,CSS3旋转还有一个特殊的写法——rotate3d(x, y, z, a),取值如下:

  1. x:是一个0或1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
  2. y:是一个0或1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
  3. z:是一个0或1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
  4. a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

3、3D缩放

通过使用3D缩放函数,可以让元素在Z轴上按比例缩放。默认值为1,当值大于1时,元素放大,反之小于1大于0.01时,元素缩小。当scale3d()中X轴和Y轴同时为1,即scale3d(1, 1, sz),其效果等同于scaleZ(sz)。

随着放大倍数的增加,直观效果上:

  1. X:以方框Y轴,左右变宽;
  2. Y:以方框X轴,上下变高;
  3. Z:看不出变换,scaleZ()和scale3d()函数单独使用时没有任何效果。

4、3D扭曲

扭曲是二维变形,不能在三维空间变形。元素可能会在X轴和Y轴扭曲,然后转化为三维,但它们不能在Z轴扭曲。

五、实例展示

结合上周的CSS3过渡,使用三维变形实现一个正方体的旋转效果,如下:

书写HTML代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS3的过渡</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">


    </style>
</head>
<body>
    <!-- 案例的结构 -->
    <div class="stage">
        <div class="container">
            <div class="side front">码匠</div>
            <div class="side back">码匠</div>
            <div class="side left">码匠</div>
            <div class="side right">码匠</div>
            <div class="side top">码匠</div>
            <div class="side bottom">码匠</div>
        </div>
    </div>
</body>
</html>

对应的CSS样式效果如下:

/*效果的大父级*/
.stage {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 300px auto;
    background: url("images/bg.jpg") repeat center center;
    /*设定当前效果的视距,产生透视效果*/
    perspective: 800px;
}
.container {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    /*声明3D形变风格*/
    transform-style: preserve-3d;
    /*使用过渡来实现效果*/
    transition: all 3s linear;
}
/*hover与过渡效果搭配*/
.container:hover {
    transform: rotateX(180deg) rotateY(180deg);
}
/*正方体六个面的公共样式*/
.side {
    position: absolute;
    height: 200px;
    width: 200px;
    border: 2px solid #8ec63f;
    background: rgba(142,198,63,0.3);
    color: #fff;
    line-height: 200px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
/*前面*/
.front {
    transform: translateZ(100px);
}
/*后面*/
.back {
    transform: rotateX(180deg) translateZ(100px);
}
/*左面*/
.left {
    transform: rotateY(-90deg) translateZ(100px);
}
/*右面*/
.right {
    transform: rotateY(90deg) translateZ(100px);
}
/*上面*/
.top {
    transform: rotateX(90deg) translateZ(100px);
}
/*下面*/
.bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

实现的效果如下图所示:

六、总结

理论上、现实世界及3次元世界中的各种有规律的运动效果都可以使用CSS3 transform 3D方法实现。文章最后的旋转效果可以说是各类千奇百怪效果中的沧海一粟~~~其他各类有的没有的效果还是需要大家自己的大脑去构想。至于实现方面,只要理解了,其实也就都是比较简单的。

最后提醒:CSS3效果制作要是不理解,纯粹从网上copy些效果代码,那永远就是copy的命咯!所以大家还是自己去手写一下吧!

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-12-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据科学学习手札

(数据科学学习手札37)ggplot2基本绘图语法介绍

  ggplot2是R语言中四大著名绘图框架之一,且因为其极高的参数设置自由度和图像的美学感,即使其绘图速度不是很快,但丝毫不影响其成为R中最受欢迎的绘图框架;...

2045
来自专栏magicsoar

母函数及相关的算法题

母函数即生成函数,构造这么一个多项式函数g(x),使得x的n次方系数为f(n),是组合数学中尤其是计数方面的一个重要理论和工具。 (1+a1x)(1+a2x)(...

2038
来自专栏数据小魔方

绩效管理工具(二)——温度计风格图表!

今天跟大家分享另一种用作绩效管理的图表工具——温度计风格图表! ▽ 这种图表看起来简洁、直观。数据表达清晰、无冗余。今天主要介绍两种做法,都不是特别复杂,但是需...

2838
来自专栏FreeBuf

中文点选验证码之自动识别

某次测试中遇到了汉字点选的验证码,看着很简单,尝试了一下发现有两种简单的识别方法,终于有空给重新整理一下,分享出来。

2004
来自专栏数据小魔方

sparklines迷你图系列12——Composition(Cascade)

今天继续跟大家分享的sparklines迷你图系列12——Composition(Cascade)。 不知道为啥这个图的名字英文看起来这么怪,但是其实他就是我们...

2694
来自专栏UAI人工智能

实战派 | PaddlePaddle 你其实也可以真正地上手

1634
来自专栏Java呓语

UML — — 类图目录

这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系; 能看懂类图中各个类之间的线条、箭头代表什么意思后,也就足够应对 日常的工作和交流; 同时,...

733
来自专栏用户2442861的专栏

深度学习样本生成data augmentation

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/d...

733
来自专栏十月梦想

css3动画变换transform用法

刚才说到transition动画执行,接下来看下动画变换(transform),transform属性的取值4个

604
来自专栏灯塔大数据

每周学点大数据 | No.75 Spark 实践案例——PageRank

本文为灯塔大数据原创内容,欢迎个人转载至朋友圈,其他机构转载请在文章开头标注 编者按:灯塔大数据将每周持续推出《从零开始学大数据算法》的连载,本书为哈尔滨工业大...

3638

扫码关注云+社区