锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / 网站前端开发中级开源技术 / CSS3 3D转换
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

CSS3 3D转换

3D转换

上节我们讲到了CSS3的2D转换,其中提到了3D转换,在本章中,您将学到其中的一些 3D 转换方法。

三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似。使用二维变形我们能够改变元素在水平和垂直轴线,然而还有一个轴沿着它,我们可以改变元素。使用三维变形,我们可以改变元素在Z轴位置。

它如何工作?

转换是使元素改变形状、尺寸和位置的一种效果。

您可以使用 2D 或 3D 转换来转换您的元素。

浏览器支持

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换(它只支持 2D 转换)。

rotateX() 方法

通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。

实例

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}

rotateY() 旋转

通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

实例

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}

rotateY() 旋转

rotateZ()函数和其他两个函数功能一样的,区别在于rotateZ()函数指定一个元素围绕Z轴旋转

rotateZ()函数指定元素围绕Z轴旋转,如果仅从视觉角度上看,rotateZ()函数让元素顺时针或逆时针旋转,并且效果和rotate()效果等同,但他不是在2D平面的旋转。

CSS3 3D位移

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

translate3d(tx,ty,tz)
其属性值取值说明如下:
tx:代表横向坐标位移向量的长度;
ty:代表纵向坐标位移向量的长度;
tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。

在CSS3中3D位移除了translate3d()函数之外还有translateZ()函数。translateZ()函数的功能是让元素在3D空间沿Z轴进行位移,其基本使用语法如下:

 translate(t)
取值说明如下:
t:指的是Z轴的向量位移长度。
使用translateZ()函数可以让元素在Z轴进行位移,当其值为负值时,元素在Z轴越移越远,导致元素变得较小。反之,当其值为正值时,元素在Z轴越移越近,导致元素变得较大。

translateZ()函数在实际使用中等同于translate3d(0,0,tz)。仅从视觉效果上看,translateZ()和translate3d(0,0,tz)函数功能非常类似于二维空间的scale()缩放函数,但实际上完全不同。translateZ()和translate3d(0,0,tz)变形是发生在Z轴上,而不是X轴和Y轴。当使用3D变形,能够在一Z轴上移动一个元素确实有很大的好处,比如说在创建一个3D立方体的盒子之时。

CSS3 3D缩放

CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数,当scale3d()中X轴和Y轴同时为1,即scale3d(1,1,sz),其效果等同于scaleZ(sz)。通过使用3D缩放函数,可以让元素在Z轴上按比例缩放。默认值为1,当值大于1时,元素放大,反之小于1大于0.01时,元素缩小。其使用语法如下:

scale3d(sx,sy,sz)
其取值说明如下:
sx:横向缩放比例;
sy:纵向缩放比例;
sz:Z轴缩放比例;
scaleZ(s)
其取值说明如下:
s:指定元素每个点在Z轴的比例。
scaleZ(-1)定义了一个原点在Z轴的对称点(按照元素的变换原点)。
scaleZ()和scale3d()函数单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果。

转换属性

下面的表格列出了所有的转换属性

属性描述

transform 向元素应用 2D 或 3D 转换。

transform-origin 允许你改变被转换元素的位置。

transform-style 规定被嵌套元素如何在 3D 空间中显示。

perspective 规定 3D 元素的透视效果。

perspective-origin 规定 3D 元素的底部位置。

backface-visibility 定义元素在不面对屏幕时是否可见。

3D Transform 方法

函数描述

matrix3d(n,n,n,n,n,n,

n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。

translate3d(x,y,z) 定义 3D 转化。

translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。

translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。

translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。

scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。

scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿 X 轴的 3D 旋转。

rotateY(angle) 定义沿 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

perspective(n) 定义 3D 转换元素的透视视图。

CSS 2D和3D转换区别就在于一个是平面的旋转,一个是立体的旋转,通过这两篇的学习,我们呢可以制作出更炫酷的网页效果。

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内