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 条评论
登录 后参与评论

相关文章

来自专栏HT

根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

在数学中,矩阵是以行和列排列的数字,符号或表达式的矩形阵列,任何矩阵都可以通过相关字段的标量乘以元素。矩阵的主要应用是表示线性变换,即f(x)= 4 x等线性函...

1975
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

1454
来自专栏hightopo

根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

833
来自专栏贾志刚-OpenCV学堂

OpenCV中的透视变换介绍

透视变换原理 透视变换是将图像从一个视平面投影到另外一个视平面的过程,所以透视变换也被称为投影映射(Projection Mapping)。我们知道在图像的仿射...

4236
来自专栏达摩兵的技术空间

css3渐变:linear-gradient

之前的实践中我们了解并熟悉了background-size,以及backgroud-clip,今天我们学习并实践的是线性渐变linear-gradient.

643
来自专栏天天P图攻城狮

Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路

这篇文章将给大家讲解如何在Android系统上基于OpenGL ES 2.0来实现相机实时图片涂鸦效果,所涂内容跟随人脸出现、消失、移动、旋转及缩放,在这里,我...

88213
来自专栏向治洪

仿今天头条加载环境文字闪动效果

实现原理: ? 对Paint设置Shade,此处用的是LinearGradient,线性渐变,构造方法指定渐变的起始坐标和终止坐标,渐变的颜色,渐变的模式,然...

1895
来自专栏运维小白

开源博客markdown插入表格语法

普通的表格 Markdown 代码: | 一个普通标题 | 一个普通标题 | 一个普通标题 | | ------ | ------ | ------ | | 短...

17710
来自专栏游戏开发那些事

【Cocos2d-x游戏开发】浅谈游戏中的坐标系

  无论是开发2D还是开发3D游戏,首先必须弄清楚坐标系的概念。在Cocos2d-x中,需要了解的有OpenGL坐标系、世界坐标系和节点坐标系。

693
来自专栏hbbliyong

Opencv-python画图基础知识

1445

扫描关注云+社区