音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

CSS3之2D与3D变换的实现方法
日期:2021-09-05 22:09:20   来源:脚本之家

css3实现了对元素执行2D平面变换,以及视觉上的3D空间变换,2D变换平时可能用的较多,3D效果也能锦上添花;

关于坐标轴

初中数学的几何学里我们便开始接触坐标轴,最基本的是平面直角坐标系 XoY ,然后延伸出空间直角坐标系 XYZ ,现在我们来说一下css中的坐标系;

css甚至一下设备相关的开发中,基本都遵循这样一套坐标系:以手机屏幕为例,坐标系 圆点 位于屏幕最左上角; x轴 水平,向右为正方向; y轴 垂直,向下为正方向; z轴 垂直于整个屏幕平面,向外为正方向,就是屏幕光线射向你眼睛的方向;

如图:

CSS3之2D与3D变换的实现方法

2D变换

包括平移 translate() ,旋转 rotate() ,缩放 scale() ,倾斜 skew() ,矩阵 matrix()

translate(x,y)

平移操作,包括 translateX(x) , translateY(y) ,括号内填平移参数值,可以是负值,即反方向;

例如:

div {
    /*元素向右平移50px,向下移60px*/
    transform: translateX(50px);
    transform: translateY(60px);
}
/*简写形式,效果相同*/
div {
    transform: translate(50px, 60px);
}

注意 translate() 只指定一个值则默认是 x轴 位移,即水平移动;

rotate(deg)

元素旋转,括号中参数为旋转角度, 顺时针 为正值, 逆时针 为负值,单位为 deg ,即多少度;

例如:

div {
    /* 顺时针旋转30° */
    transform: rotate(30deg);
}

CSS3之2D与3D变换的实现方法

scale(x,y)

缩放元素,参数分别为x轴,y轴缩放倍数,包括 scaleX(x)scaleY(y) ,提供一个参数表示 按比例 缩放;

例如:

div {
    /* 横向缩小一半,纵向放大一倍 */
    transform: scale(.5, 2);
}

CSS3之2D与3D变换的实现方法

div {
    /* 按比例放大3倍 */
    transform: scale(3);
}

CSS3之2D与3D变换的实现方法

skew(xdeg,ydeg)

包含 skewX(deg) , skewY(deg) ,表示在水平和垂直方向倾斜的角度;

例如:

div {
    transform: skewX(30deg);
    transform: skewY(45deg);
}
/* 简写 */
div {
    transform: skew(30deg, 45deg);
}

需要 注意 ,如果元素为一个矩形,那么 skewX(30deg) 表示矩形 顶边固定 ,底边 向右 倾斜 30degskewY(30deg) 表示矩形 左边框固定 ,右边框 向下 倾斜 30deg

可以根据上面讲的屏幕坐标系来记忆,x轴位于屏幕顶部,方向向右;y轴位于屏幕左部,方向向下;

如果 skew() 只指定一个值,默认是 水平倾斜

skewX(30deg)的效果:

CSS3之2D与3D变换的实现方法

skewY(30deg)的效果:

CSS3之2D与3D变换的实现方法

matrix(a,b,c,d,e)

这是一个综合属性,之前的平移,缩放,旋转,倾斜都能通过这个矩阵函数实现,对,大学里 线性代数 中的矩阵 T_T;

其实这个函数就是前面四种操作的 原理 ,函数共有六个参数,四种操作都对应不同的参数改变方式,像我们这种非数学专业的就不赘述原理了,前面的操作基本够用了(想寻找刺激就去百度“css matrix”吧)~~;

3D变换

所谓3D就是在前面2D平面上多了一个 z轴 ,方法名也差不多,然后能以分别以三根轴位基准进行变换,实现立体效果;

看一下所有3D操作方法:

translate3d(x,y,z)

结合前面讲的空间坐标系和 x, y, z轴的位置,三个参数分别对应元素在三个坐标轴方向的平移值,也包含三个方法 translateX(x) , translateY(y) , translateZ(z)

举例:

div {
    transform: translateX(50px);
    transform: translateY(60px);
    transform: translateZ(70px);
}
/* 简写 */
div {
    transform: translate3d(50px, 60px, 70px);
}

注意:关于设置 translateZ(z) 看不出效果的问题,后面说到设置 persoective 时会解释;

rotate3d(x,y,z,deg)

参数 x, y, z 为空间坐标系的一个坐标位置,然后由原点 (0, 0, 0) 指向这个点形成一个有方向的新轴,数学中称矢量,最后一个参数就是元素围绕刚才所形成的新轴旋转的度数;

也包括 rotateX(deg) , rotateY(deg) , rotateZ(deg) ,之前2D的 rotate() 便是这里的 rotateZ()

至于旋转的方向,判断方法类似于物理中的 左手定则 :角度指定为正的话,左手拇指与四指垂直,拇指指向元素围绕旋转的坐标轴或自定义轴,四指弯曲围绕方向就是旋转方向;

举例:

div {
    transform: rotateX(30deg);
    transform: rotateY(30deg);
    transform: rotataZ(30deg);
}
/* 自定义轴旋转 */
div {
    transform: rotate3d(10, 10, 10, 30deg);
}

rotateX(30deg)的效果:

CSS3之2D与3D变换的实现方法

rotateY(30deg)的效果:

CSS3之2D与3D变换的实现方法

关于为什么这里的旋转不是想象中的效果,而是缩小,主要是没有设置视点,后面会讲;

scale3d(x,y,z)

元素关于三个轴的缩放比例,包括 scaleX(x) , scaleY(y) , scaleZ(z) ,举例:

div {
    transform: scaleX(2);
    transform: scaleY(2);
    transform: scaleZ(2);
}
/* 简写 */
div {
    transform: scale3d(2, 2, 2);
}

需要 注意 这里的 scaleZ() ,正常情况下,扩大z轴会是物体 变厚 ,但是css里面呈现的平面元素并没有 厚度 ,所以这里的缩放z轴其实是缩放元素在z轴的 坐标 ,所以要有效果必须要指定 translateZ() 的值;

举例:

body {
    perspective: 500;
}
div {
    /* 必须这个顺序,先缩放后平移,不然无效果 */
    transform: scaleZ(2) translateZ(100px);
}

CSS3之2D与3D变换的实现方法

按照上面样式才能看到 scaleZ(2) 的效果,因为后面在z轴上移动了 100px ,缩放比例为2,最终会移动 200px ,屏幕上则表现为元素放大了一下,这是透视效果,就是那个 perspective 值,下面会讲到;

matrix3d()

和前面2D的 matrix() 相似,只不过这里括号里的参数有 16个 ,矩阵更加复杂,跳过吧﹋o﹋,有兴趣可以自行百度~~;

perspective

在上面的示例中,有关z轴的平移和缩放通常情况下是看不出效果的,正是缺少这项属性值,叫做 透视 ,美术或设计中会出现这个词汇,就是实现物体近大远小的效果,远小最终会小到一个点,那就是 透视点perspective 就是用来设置那个点距离元素有多远,一般300~600很体现很好的透视效果, 值越小元素透视变形越严重

需要 注意 的是,这项属性设置在应用透视效果元素的 父元素 的样式中,才能看出效果,例如:

body {
    perspective: 500;
    /* 考虑浏览器兼容 */
    -webkit-perspective: 500;
}

也可以设置在元素本身,格式为:

div {
    transform: perspective(500);
    -webkit-transform: perspective(500);
}

rotateX(45deg)的更真实的效果:

CSS3之2D与3D变换的实现方法

rotateY(45deg)的效果:

CSS3之2D与3D变换的实现方法

perspective-origin

此项设置透视点的位置,默认在元素几何中心,需要设置的话,格式如下:

body {
    /* 默认中心 */
    perspective-origin: center center;
    /* 左上角 */
    perspective-origin: left top;
    /* 右边中心 */
    perspective-origin: right center;
    /* 底部中心 */
    perspective-origin: bottom center;
    /* 也可以是长度 */
    perspective-origin: 30px 40px;
    /*最后记得加 -webkit- 兼容 */
}

perspective-origin: left center的效果:

CSS3之2D与3D变换的实现方法

perspective-origin: right center的效果:

CSS3之2D与3D变换的实现方法

backface-visibility

翻译过来叫背面是否可见,可以设置 visiblehidden ,默认可见,比如元素正面有文字,设置背面可见,则关于y轴旋转180°后元素内文字变成镜像,否则不会出现;

backface-visibility: visible的效果:

CSS3之2D与3D变换的实现方法

backface-visibility: hidden的效果(有旋转,只是背面不可见,则看不见了):

CSS3之2D与3D变换的实现方法

其他属性

transform-origin

设置2D/3D变化的基准,可以是长度值,也可以是 left, right, top, bottom ,例如:

div {
    /* 关于元素左上角旋转 */
    transform-origin: left top;
    transform: rotate(30deg);
}

CSS3之2D与3D变换的实现方法

transform-style

设置元素如何在3D空间呈现被嵌套的元素,选择是 flatpreserve-3d ,默认 flat

这里这么来理解,之前我们对一个元素执行变换时,都是以屏幕所在平面的坐标系在变换,但是元素如果存在子元素的话, transform-style 就是用来确定在哪套坐标系上进行变换, flat 表示任然以屏幕坐标系为基准, preserve-3d 表示以 变换后的父元素所在平面的坐标系 为基准;

#parent {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: perspective(500) rotateY(45deg);
    -webkit-transform: perspective(500) rotateY(45deg);
}
#child {
    transform: perspective(500) rotateX(45deg);
    -webkit-transform: perspective(500) rotateX(45deg);
}

flat的效果:

CSS3之2D与3D变换的实现方法

preserve-3d的效果:

CSS3之2D与3D变换的实现方法

例如,父元素绕x轴旋转了45度,并且设置 transform-style: preserve-3d ,而嵌套的子元素只绕y轴旋转45度,那么最终效果就是子元素绕父元素平面的y轴旋转了45度,看起来就像先x轴转45度后y轴转45度的效果;

最后,别忘了为以上所有特性添加浏览器兼容前缀;

顺便附上一个以上功能综合效果的演示页面,请戳下面:CSS 3D

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    教程标签
    HTMLCSSDreamweaverFrontpage