CSS3 3D 转换

最新推荐文章于 2023-02-07 00:00:00 发布
最新推荐文章于 2023-02-07 00:00:00 发布
阅读量192 收藏
点赞数 1
分类专栏： CSS 网络 web 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44799645/article/details/103189631
版权
web 同时被 3 个专栏收录
34 篇文章 0 订阅
订阅专栏
网络
24 篇文章 0 订阅
订阅专栏
CSS
23 篇文章 0 订阅
订阅专栏

今天跟大家说一下CSS3 3D 转换吧
一起来学习下吧
小常说一下：
有时候,生活不免走向低谷,才能迎接你的下一个高点
3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。

在这之中，大家跟小常将学到其中的一些 3D 转换方法：

rotateX()
rotateY()
点击下面的元素，来查看 2D 转换与 3D 转换之间的不同之处：

在这里插入图片描述
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transform 36.0
12.0 -webkit- 10.0 16.0
10.0 -moz- 4.0 -webkit- 23.0
15.0 -webkit-
transform-origin
(three-value syntax) 36.0
12.0 -webkit- 10.0 16.0
10.0 -moz- 4.0 -webkit- 23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit- 11.0 16.0
10.0 -moz- 4.0 -webkit- 23.0
15.0 -webkit-
perspective 36.0
12.0 -webkit- 10.0 16.0
10.0 -moz- 4.0 -webkit- 23.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit- 10.0 16.0
10.0 -moz- 4.0 -webkit- 23.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit- 10.0 16.0
10.0 -moz- 4.0 -webkit- 23.0
15.0 -webkit-
rotateX() 方法
在这里插入图片描述
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>标题</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotateX(120deg);
	-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

运行结果
在这里插入图片描述
rotateY() 方法
Rotate Y
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

OperaSafariChromeFirefoxInternet Explorer
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>标题</title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotateY(130deg);
	-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

运行结果
在这里插入图片描述
转换属性
下表列出了所有的转换属性：

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3
3D 转换方法
函数 描述
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 转换元素的透视视图。
transform：3D变形：
transform：3D变形可以近似理解为沿着Z轴移动元素，使得元素更加靠近或者远离你，从而使元素看起来变得更大或更小。

transform：3D变形函数
translate3d(x,y,z) 定义 3D 转换。
translateY(y) 定义转换，只是用 Y 轴的值。
translateX(x) 定义转换，只是用 X 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

scale3d(x,y,z) 定义 3D 缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

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

transform-origin 允许你改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

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

transform-style 规定被嵌套元素如何在 3D 空间中显示。
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。

自然卷
css3动画效果
transform：2D变形：
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法：translate()/rotate()/scale()/skew()/matrix()

none 定义不进行转换。
translate(x,y) 定义 2D 平移转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。

scale(x,y) 定义 2D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

rotate(angle) 定义 2D 旋转，在参数中规定角度。
补充1.角度也可以使用弧度单位：rad

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
kewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
变形矩阵功能很强大，但是相对比较复杂，涉及到复杂的数学计算，在本章中暂不作详细讲解。

transform-origin:改变元素变形的基准点
像素/百分比
X轴：left/right/center
Y轴：top/bottom/center/

transform：3D变形：
transform：3D变形可以近似理解为沿着Z轴移动元素，使得元素更加靠近或者远离你，从而使元素看起来变得更大或更小。

transform：3D变形函数
translate3d(x,y,z) 定义 3D 转换。
translateY(y) 定义转换，只是用 Y 轴的值。
translateX(x) 定义转换，只是用 X 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

scale3d(x,y,z) 定义 3D 缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

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

transform-origin 允许你改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

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

transform-style 规定被嵌套元素如何在 3D 空间中显示。
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。

perspective-origin 规定 3D 元素的底部位置。目前浏览器都不支持 perspective-origin 属性，
backface-visibility 定义元素在不面对屏幕时是否可见
小常说一下：
鹰，不需鼓掌，也在飞翔。小草，没人心疼，也在成长。做事不需人人都理解，只需尽心尽力。坚持，注定有孤独彷徨，质疑嘲笑，也都无妨。就算遍体鳞伤，也要撑起坚强，其实一世并不长，既然来了，就要活得漂亮！加油！大家！

梦见憨憨丽吖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS:旋转的正方体相册
qq_40924992的博客
06-15 337
HTML+CSS:旋转正方体相册
六张图片形成立方体并旋转
yan101795的博客
01-03 1123
用六张图片整合成一个立方体，加一个旋转的动画，即构成如上效果。 代码吐下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" co.
使用CSS3实现一个正方体相册
weixin_45268910的博客
07-19 218
CSS3中提出了过渡，3D模型和动画的概念今天我们使用CSS3来制作一个六棱柱的相册 下面是效果预览： https://www.bilibili.com/video/BV1Rb4y1k73C?share_source=copy_web 关于代码： 首先，我们先写出六个面，然后普分别给这六个面放相册需要的图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
CSS3制作立方体的土味相册
一个无聊的前端写点无聊的东西
04-27 383
在日常的网络生活中，我们经常会看到一些土味相册，尤其是父母辈的朋友圈通过各种链接去制作各种花里胡哨的土味相册集，今天我们就利用css3制作一个立方体的土味相册。 制作3D立方体首先需要了解一个在摄影里面的一个重要概念：景深 在摄影中镜头焦距越长景深越浅、反之景深越深。主体越近，景深越浅，主体越远，景深越深。 而在css3中制作3D图形也有这个类似概念，即perspective: 注意：perspe...
css3制作旋转立方体相册
weixin_30362233的博客
08-12 402
css3制作旋转立方体相册 首先让我们来看一下最终效果图： 当鼠标放在图片上是介个样子滴： 是不是觉得很好看？那接下来就一起制作吧！ 我个人觉得编程，首先是思路，然后是代码，一起分析一下这个效果的思路。 1.背景颜色，它属于一种渐变的背景色（当然这不是重点，可以根据自己的爱好进行设置）； 2.我们可以观察一下他是有两个旋转的立方体，大立方体套小立方体； 3.点击图片...
CSS动画 3D反转Tab
01-29
CSS3中的3D转换提供了在三维空间中操作元素的能力，增强了视觉效果。主要有以下几种变换： 1. `transform: translate3d(x, y, z)`: 平移元素在X、Y、Z轴上的位置。 2. `transform: rotateX(angle)`: 以X轴为轴心...
CSS-3D悬停相册动画
最新发布
03-21
1. **3D转换基础** - `transform-style: preserve-3d;`：此属性确保子元素在3D空间中保持它们的3D结构，而不是扁平化。 - `perspective`: 设置观察者的视距，影响3D元素的深度感。 - `backface-visibility: ...
利用HTML5+CSS3实现3D转换效果实例详解
09-24
3D转换是CSS3的一个强大特性，它允许我们在网页设计中模拟真实世界的深度和视角。在本文中，我们将深入探讨如何利用HTML5和CSS3实现3D转换效果。 首先，我们要理解3D坐标系的基本概念。在CSS3的3D坐标系中，X轴沿...
css3 3d光照文字特效
11-23
【CSS3 3D光照文字特效】是一种利用CSS3中的3D转换和光照效果来创建出立体、动态的文字展示方式。这种技术极大地丰富了网页设计的表现力，使得文本不仅仅局限于二维平面，而是能够呈现出三维空间的视觉效果。下面将...
抖音很火的立方体相册.zip
12-04
最近抖音很火的立方体相册来啦！本资源包含了CSS文件，img，JS，下载后可以直接打开页面就能看到效果，你也可以替换成自己的照片，修改里面的样式。里面有详细的注释，它将会是你学习的好资源也是撩妹的好技能。
3D立方体图片旋转特效
07-29
3D立方体图片旋转特效
css3制作3d正方体相册
Alice_yo的博客
01-05 1214
写了一个3D旋转相册 外面是一个正方体 内部是一个小的正方体 当然 鼠标不到外面的大的正方体是看不见里面小的正方体的 图片我用的是img引入的 也可以换成背景图引入 下面的代码其实还可以做一些简化 并且也有其他的更好的方法 哈哈哈 不过自己本人太懒了 就这个样子叭~ <!DOCTYPE html> <html lang="en"> <head> ...
教你用 CSS 实现超真实的 3D 相册，让你的照片立体感 UPUP
Shids_的博客
02-07 6002
教你用 CSS 实现超真实的 3D 相册，让你的照片立体感 UPUP
CSS3之3d转换
lord_of_war的博客
05-04 145
CSS3 允许您使用 3D 转换来对元素进行格式化。 在本章中，您将学到其中的一些 3D 转换方法： rotateX() rotateY() 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 rotateX() 方法 rotateX()方法，围绕其在一个给定度数X轴旋转的元素。...
CSS3 3D转换
奇奇怪怪
08-12 238
transform是一个相对比较难的属性，2D转换还好点，3D转换由于涉及空间旋转、透视等比较难以理解，但是我们只要掌握transform本质上就是一系列变形函数，分别是translate位移，rotate旋转....
css3之实现网红正方体相册弹开动画
sxjit的博客
03-17 674
这里讲解实现抖音网红的正方体相册的动画制作(大正方体包裹小正方体，鼠标点击大正方体弹开展现小正方体)。 先上效果图： 1. 基础结构 老规矩，先写好基础结构。这里关于3D动画制作原理及正方体简单旋转制作的知识还不清楚的话可以参考我上一篇文章。首先父元素cube用来接收3D动画的视觉属性；然后box子元素包裹正方体内容并规定动画形式为3D；然后写进大正方体的6个面div和小正方体元素inner-b...
css动画效果制作正方体旋转相册
qq_48712173的博客
08-17 374
代码】css动画效果制作正方体旋转相册。
css transform3d
08-30
- *1* *2* [CSS3的transform之3d转换、CSS3动画](https://blog.csdn.net/m0_46324704/article/details/125860882)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值