一篇文章带你了解CSS3 3D 转换知识
回复“资料”即可获赠Python、Java学习资料
CSS3 3D变换功能允许在3D空间中变换元素。
一、元素的3D转换
使用CSS3 3D变换功能,可以对三维空间中的元素执行基本的变换操作。如移动,旋转,缩放和倾斜。
变换后的元素不会影响周围的元素,但可以像绝对定位的元素一样将它们重叠。但是,变换后的元素在其默认位置(未变换)仍会在布局中占用空间。
二、使用CSS变换和Transform()函数变换功能
CSS3 transform属性使用变换功能来操纵元素使用的坐标系,以便应用变换效果。
案例描述了3D变换功能。
1. translate3d()
rotation3d()函数将3D空间中的元素围绕[x,y,z]方向向量为圆点旋转指定角度。这可以写成rotate(vx,vy,vz,angle)。
例:
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
.container {
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
}
.transformed {
-webkit-transform: translate3d(25px, 25px, 50px);
/* Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px);
}
img {
width: 125px;
height: 125px;
}
</style>
</head>
<body style="background-color: aqua;">
<h2>Before Translation:</h2>
<div class="container">
<img src="timg.jpg" alt="Diamond Card">
</div>
<h2>After Translation:</h2>
<div class="container">
<img src="timg.jpg" class="transformed" alt="Diamond Card">
</div>
</body>
</html>
该功能translate3d(25px, 25px, 50px)将图像沿X和Y轴正方向移动25个像素,并沿Z轴正方向移动50个像素。
注:
3D变换使用三维坐标系,但是沿Z方向的移动并不总是很明显,因为这些元素存在于二维平面(平面)上并且没有深度。
通过使Z轴上较高的元素(即距观看者更近的元素看起来较大,而离观看者更远的元素看起来更小),可以使用perspective和perspective-origin的CSS属性为场景添加深度感。
注意:
如果对一个元素应用3D变换而不设置透视,结果将不会显示为三维效果。
2. rotate3d()
该rotate3d()函数围绕[x,y,z]方向向量将3D空间中的元素旋转指定角度。可以写成rotate(vx, vy, vz, angle)。
例:
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg);
}
img {
width: 125px;
height: 125px;
}
该功能rotate3d(0, 1, 0, 60deg)将图像沿Y轴旋转60度。也可以使用负值沿相反方向旋转元素。
3. scale3d()
scale3d()函数更改元素的大小。可以写成scale(sx, sy, sz)。除非将其与旋转和透视图等其他变换功能结合使用,否则此功能的效果并不明显。
例:
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #6486ab;
background: #e9eef3;
}
.transformed {
-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);
}
img {
width: 125px;
height: 125px;
}
运行结果:
函数scale3d(1, 1, 2)沿Z轴缩放元素,函数rotate3d(1, 0, 0, 60deg)沿X轴旋转图像60度。
4. matrix3d()
matrix3d()功能可以一次执行所有3D转换,例如平移,旋转和缩放。它采用4×4转换矩阵]形式的16个参数。
这是使用matrix3d()功能执行3D转换的示例。
示例
.container {
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #d14e46;
background: #fddddb;
}
.transformed {
-webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
/* Chrome, Safari, Opera */
transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}
img {
width: 125px;
height: 125px;
}
但是,一次执行多个转换时,使用单个转换函数并按顺序列出它们会更方便,如下所示:
示例
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */
transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2);
}
img {
width: 125px;
height: 125px;
}
三、总结
本文基于CSS基础,教读者如何去进行2D->3D的转换,介绍了常见的的几个方法。去进行移动、缩放、转动、拉长或拉伸等一系列操作。使用Html语言,使用丰富的案例,以及效果图的展示。
欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
希望能够帮助你学习。
------------------- End -------------------
往期精彩文章推荐:
本文分享自微信公众号 - IT共享之家(info-share)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Ruby 计划跳过 2.8.0 直接发布 3.0.0 版本
Ruby 创始人 Matz 最近提交的commit 显示,他计划今年跳过 2.8.0 直接发布 3.0.0 版本。 Matz 没有解释做出这个决定的原因,两年前他曾透露 Ruby 3 将会朝三个方向进行推动,即快速、分布式可伸缩,以及精确分析,最终有望实现 3 倍提速。Ruby 3 会在每年的版本发布中添加一些新功能,当达到制定的目标时,就是 Ruby 3,从而避免带来不兼容的更改。 从 Hacker News 对这个话题的讨论来看,有人指出 Ruby 3 有望引入新的并发原语(concurrency primitives),这些原语可以规避全局解释器锁(guilds / isolates),并为 stdlib 引入类型定义,以提供可选的类型支持,这将会是 Ruby 的重要版本。 关于类型参数方面,Ruby 3 确实有添加“静态类型”的计划,去年知名 Ruby 开发者Paul Tarjan 曾发表演讲表示正与 Ruby 核心团队合作开发并为 Ruby 添加“静态类型”特性,“静态类型”将会是 Ruby 3 stdlib 源码的一部分。 Ruby 目前最新的稳定版是 2.7.1,从 2...
- 下一篇
堂妹问我:Dubbo的服务暴露过程
这周去苏州见大佬,没想到遇到一堆女粉丝,其中居然还有澡堂子堂妹,堂妹一遇到我就说敖丙哥哥我超级喜欢你写的dubbo系列,你能跟我好好讲一下他的服务暴露过程么? 我笑了笑:傻瓜,你想看怎么不早点说呢? 我今天来就带大家看看 Dubbo 服务暴露过程,这个过程在 Dubbo 中其实是很核心的过程之一,关乎到你的 Provider 如何能被 Consumer 得知并调用。 今天还是会进行源码解析,毕竟我们需要深入的去了解 Dubbo 是如何做的,只有深入它才能了解它。 不用担心源码问题,因为不仅仅有源码解析,敖丙也会通过画图和总结性的语言帮助大家理解,而且在面对面试官的时候,总结性的语言才是最重要的,因为不见得面试官也懂得或者记得具体的细节。 对了,源码是 2.6.5 版本。 URL 不过在进行服务暴露流程分析之前有必要先谈一谈 URL,有人说这 URL 和 Dubbo 啥关系?有关系,有很大的关系! 一般而言我们说的 URL 指的就是统一资源定位符,在网络上一般指代地址,本质上看其实就是一串包含特殊格式的字符串,标准格式如下: protocol://username:password@ho...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- 2048小游戏-低调大师作品
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Red5直播服务器,属于Java语言的直播服务器
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7