HTML5学习笔记—CSS3 transform转换属性（2D/3Dtransform方法）

最新推荐文章于 2022-08-13 15:17:35 发布
最新推荐文章于 2022-08-13 15:17:35 发布
阅读量1k 收藏 1
点赞数


<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>transform方法</title> <style> table{ border:3px solid yellow; border-collapse:collapse; } td,th{ border:1px solid pink; } </style> </head> <body> <div> <h2>转换属性</h2> <p>下面的表格列出了所有的转换属性：</p> <table class="dataintable"> <tr> <th style="width:25%;">属性</th> <th>描述</th> <th style="width:5%;">CSS</th> </tr> <tr> <td><a href="/cssref/pr_transform.asp" title="CSS3 transform 属性">transform</a></td> <td>向元素应用 2D 或 3D 转换。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/pr_transform-origin.asp" title="CSS3 transform-origin 属性">transform-origin</a></td> <td>允许你改变被转换元素的位置。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/pr_transform-style.asp" title="CSS3 transform-style 属性">transform-style</a></td> <td>规定被嵌套元素如何在 3D 空间中显示。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/pr_perspective.asp" title="CSS3 perspective 属性">perspective</a></td> <td>规定 3D 元素的透视效果。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/pr_perspective-origin.asp" title="CSS3 perspective-origin 属性">perspective-origin</a></td> <td>规定 3D 元素的底部位置。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/pr_backface-visibility.asp" title="CSS3 backface-visibility 属性">backface-visibility</a></td> <td>定义元素在不面对屏幕时是否可见。</td> <td>3</td> </tr> </table> </div> <div> <h2>2D Transform 方法</h2> <table class="dataintable"> <tr> <th style="width:25%;">函数</th> <th>描述</th> </tr> <tr> <td>matrix(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td> <td>定义 2D 转换，使用六个值的矩阵。</td> </tr> <tr> <td>translate(<i>x</i>,<i>y</i>)</td> <td>定义 2D 转换，沿着 X 和 Y 轴移动元素。</td> </tr> <tr> <td>translateX(<i>n</i>)</td> <td>定义 2D 转换，沿着 X 轴移动元素。</td> </tr> <tr> <td>translateY(<i>n</i>)</td> <td>定义 2D 转换，沿着 Y 轴移动元素。</td> </tr> <tr> <td>scale(<i>x</i>,<i>y</i>)</td> <td>定义 2D 缩放转换，改变元素的宽度和高度。</td> </tr> <tr> <td>scaleX(<i>n</i>)</td> <td>定义 2D 缩放转换，改变元素的宽度。</td> </tr> <tr> <td>scaleY(<i>n</i>)</td> <td>定义 2D 缩放转换，改变元素的高度。</td> </tr> <tr> <td>rotate(<i>angle</i>)</td> <td>定义 2D 旋转，在参数中规定角度。</td> </tr> <tr> <td>skew(<i>x-angle</i>,<i>y-angle</i>)</td> <td>定义 2D 倾斜转换，沿着 X 和 Y 轴。</td> </tr> <tr> <td>skewX(<i>angle</i>)</td> <td>定义 2D 倾斜转换，沿着 X 轴。</td> </tr> <tr> <td>skewY(<i>angle</i>)</td> <td>定义 2D 倾斜转换，沿着 Y 轴。</td> </tr> </table> </div> <div> <h2>3D Transform 方法</h2> <table class="dataintable"> <tr> <th style="width:25%;">函数</th> <th>描述</th> </tr> <tr> <td>matrix3d(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<br/><i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td> <td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td> </tr> <tr> <td>translate3d(<i>x</i>,<i>y</i>,<i>z</i>)</td> <td>定义 3D 转化。</td> </tr> <tr> <td>translateX(<i>x</i>)</td> <td>定义 3D 转化，仅使用用于 X 轴的值。</td> </tr> <tr> <td>translateY(<i>y</i>)</td> <td>定义 3D 转化，仅使用用于 Y 轴的值。</td> </tr> <tr> <td>translateZ(<i>z</i>)</td> <td>定义 3D 转化，仅使用用于 Z 轴的值。</td> </tr> <tr> <td>scale3d(<i>x</i>,<i>y</i>,<i>z</i>)</td> <td>定义 3D 缩放转换。</td> </tr> <tr> <td>scaleX(<i>x</i>)</td> <td>定义 3D 缩放转换，通过给定一个 X 轴的值。</td> </tr> <tr> <td>scaleY(<i>y</i>)</td> <td>定义 3D 缩放转换，通过给定一个 Y 轴的值。</td> </tr> <tr> <td>scaleZ(<i>z</i>)</td> <td>定义 3D 缩放转换，通过给定一个 Z 轴的值。</td> </tr> <tr> <td>rotate3d(<i>x</i>,<i>y</i>,<i>z</i>,<i>angle</i>)</td> <td>定义 3D 旋转。</td> </tr> <tr> <td>rotateX(<i>angle</i>)</td> <td>定义沿 X 轴的 3D 旋转。</td> </tr> <tr> <td>rotateY(<i>angle</i>)</td> <td>定义沿 Y 轴的 3D 旋转。</td> </tr> <tr> <td>rotateZ(<i>angle</i>)</td> <td>定义沿 Z 轴的 3D 旋转。</td> </tr> <tr> <td>perspective(<i>n</i>)</td> <td>定义 3D 转换元素的透视视图。</td> </tr> </table> </div> </body> </html>

HTML5学习笔记—CSS3 transform转换属性（2D/3Dtransform方法）http://bbs.h5edu.cn/?/article/7485

ccnanxi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5实现 图片3D转换
02-27
搜集而来的 html5实现 图片3D转换
CSS3 Transform变形（3D转换）
weixin_44378954的博客
02-27 757
CSS3 3D 转换 三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数： 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数； 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()...
CSS3——3D 转换
qq_43498002的博客
10-19 232
cHTML5 一、 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值 ​ 二、3D 转换 3D 转换知识要点 3D 位移：translate3d(x, y, z) 3D 旋转：rotate3d(x, y, z) 透视：perspctive 3D呈现 transfrom
css3的3D transform变换
MEMO的博客
09-24 696
最近做web前端的学习比较多，深觉css3的3D效果比较强大，虽然说也练习做了一些3D效果，但都是照葫芦画瓢，囫囵吞枣，真正要轻松实现想要的3D效果，是需要深入理解的，于是，不妨花点时间来整理下这方面的知识。 要学好一样东西，最重要的是感性上的认识，这样对于我们更加深入的理解那些抽象的名称什么的会很有帮助，关于什么是3D变化，大家就自己脑补一下生活中的实例吧，看看下面这张熟悉的3维图你就明白了。
HTML---3D变换
weixin_46016070的博客
06-17 217
<!DOCTYPE html> <html> <head> <title>3D变换</title> <style type="text/css"> .box{ height: 650px; width: 300px; float: left; transition: linear 1s; transform-style: preserve-3d; margin-right: 20px;
WPF Canvas 效果 3D 贯穿
05-12
通过使用Matrix3DTransform，我们可以操纵3D对象的旋转、平移和缩放，从而实现物体在Canvas上的动态穿越效果。 为了创建这样的效果，开发者需要定义两个或多个3D模型，每个模型都有自己的Material（材质）和...
MirrorRoom-CSS-3D:使用 CSS 3D 变换创建的镜子房间
06-25
这可以通过监听`mousemove`或`touchmove`事件，并根据事件坐标更新CSS3DTransform对象来实现。 此外，JavaScript还可以用于创建交互式的元素，如开关灯、改变壁纸图案等。这可以通过添加或修改CSS类，或者直接更改...
WPF 3D点云显示
09-14
1. **3D图形渲染**：WPF提供了System.Windows.Media.Media3D命名空间，其中包括各种3D图形对象和转换，如MeshGeometry3D用于创建3D几何形状，Viewport3D和Model3DGroup用于组合和展示3D模型，以及Camera类用于控制...
wpf 3D旋转地球
10-18
5. **矩阵变换**：通过`Matrix3DTransform`或`RotateTransform3D`等类，可以实现模型的旋转、平移和缩放。地球的自转可以通过定期更新旋转角度来实现。 6. **视图和投影**：`Viewport3D`是WPF中显示3D内容的主要...
WpfSquare WPF3D Demo
06-06
7. **3D变换**：`Matrix3DTransform`、`ScaleTransform3D`、`RotateTransform3D`和`TranslateTransform3D`等类提供了缩放、旋转、平移等3D变换，使3D对象动态和交互成为可能。 8. **3D图层和组合**：可以将多个3D...
CSS 3学习——transform 2D转换
weixin_34357267的博客
12-18 172
首先声明一点，transform属性不为none的元素是它的定位子元素（绝对定位和固定定位）的包含块，而且对内创建一个新的层叠上下文。 注意：可以通过 transform-box 属性指定元素的那个盒子发生了变换，该属性的默认值是“border-box”，查MDN只有Firefox支持该属性（我试的没效果）。 CSS 3 中2D转换的实现用到两个属性： 属性描述CSS tran...
css3 2D转换（transform）
我不想说
09-19 308
transform是css3的属性，向元素应用2d或3d转换，可以运行元素移动，旋转，倾斜，伸缩 translate()方法 位移 单位px 三种参数方式：translate(x,y) x轴y轴同时移动 translateX(x) 仅x轴移动 translateY(y) 仅y轴移动 div { transform: translate(50px,100px); -ms-transf...
CSS3学习笔记（4）——过渡、transform的2D变换
weixin_41309331的博客
07-23 247
过渡 过渡样式：transition transition-property 添加过渡效果的样式属性名称 transition-duration 过渡效果的耗时，以秒（s）作为单位 transition-timing-function 过渡时间函数，控制过渡的速度，匀速是linear transition-delay 过渡效果的延迟，...
CSS3学习第6篇——2D/3D转换
李小白的博客
12-21 250
2D/3D 转换属性（Transform） 属性 描述 CSS transform 向元素应用 2D 或 3D 转换。 3 定义和用法 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 语法 transform: none|transform-functions; 2D转换示例： &lt;!...
html--css之2D/3D形变 transform
Victor_Wei_H5的博客
11-20 1316
css样式中的2D，3D形变transform也是平时工作中常用的属性，这里讲一些常见的技巧和注意事项。 1.translate 在2D形变中，位移translate有两个参数，就是沿着x，y轴位移的距离。在3D形变中，位移translate有三个参数，分别是沿着x，y，z坐标轴位移的距离。这个属性比较简单。 2.rotate 在2D形变中，rotate有一个参数，就是旋转的角
HTML5-CSS3-新增标签-多媒体、表单属性、input标签、属性选择器、结构伪类选择器、伪元素选择器、2D旋转
解启超
02-19 298
HTML5 一、什么是 HTML5 HTML5 的概念与定义 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念： 是一个新版本的 HTML 语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些...
2D转换和3D转换 transform
liu0218的博客
08-13 1452
2D和3D转换，进行位移，旋转，缩放等等
CSS——transform实现2D变换
时光·漫步的博客
02-11 1332
1. transform 的基本属性值 值 描述 none 定义不进行转换。 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换...
css3中2D、3D属性详解
MRSLLLL_的博客
05-15 1146
2D转换 transform 首先要清楚一点，在css中的x轴正方向从左至右，但是y轴的正方向是从上至下。 位移（改变元素的位置） transform: translate（x,y） 定义2D转换，沿着x轴和y轴移动，实际上本质和定位当中的left right top bottom一样。 例如： .box { transform: translate(100px,200px); ...
unity3dtransform translate
最新发布
09-02
在Unity中，Transform组件用于控制游戏对象的位置、旋转和缩放。要在Unity中使用Transform的Translate函数来移动游戏对象的位置，可以按照以下方式调用： ```csharp using UnityEngine; public class YourScript :...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值