关闭

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

477人阅读 评论(0) 收藏 举报


<!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

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

CSS3 2D转换&3D转换

1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 100px; height: 100px; backgr...
  • zhaobw831
  • zhaobw831
  • 2016-01-17 19:56
  • 2444

WEB前端 | H5基础——(2)2D/3D形变、过渡及渐变

一、2D变换 2D变换 div { width: 200px; height: 200px; background-color: red; margin-right: 100px; float: left; } .y...
  • Erosvan
  • Erosvan
  • 2016-09-19 14:14
  • 1598

CSS3 2D转换&3D转换

1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 100px; height: 100px; backgr...
  • zhaobw831
  • zhaobw831
  • 2016-01-17 19:56
  • 2444

CSS3特效:2D转换&小案例

一、2D转换之移动 1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 2. translate(x,y)        //定义2D转换 3.示例: html> lang="en&...
  • luohuaxinyue
  • luohuaxinyue
  • 2015-12-28 20:30
  • 1041

CSS3 2D转换 3D转换

CSS3 2D转换 3D转换
  • safiri
  • safiri
  • 2016-07-18 09:39
  • 265

CSS3第二日--2D转换

CSS3提供了2D转换功能,能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform,使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix,还有基于这些分支出的translateX、sc...
  • ljl890705
  • ljl890705
  • 2016-01-06 16:57
  • 629

CSS3动画-2D、3D转换

通过CSS3转换,我们能对元素进行移动,缩放,转动,拉长或拉伸。可以使用2D、3D来转换元素。1、2D转换方法 (1)、translate():移动效果 在css文件中加入如下代码: transform: translate(200px,100px); -webkit-transf...
  • Bestsheng1996
  • Bestsheng1996
  • 2015-06-27 08:45
  • 374

HTML5和CSS3实现3D转换效果 CSS3的3D效果

上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块。   首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向。   不理解的话可以参考定位属性的z-index属性,那个在某种意义上就是让元素在z轴的移动。 ...
  • e62ces0iem
  • e62ces0iem
  • 2017-06-15 13:39
  • 336

从世界坐标系到相机坐标系(3D物体到2D图像的转变)

转载:http://blog.sina.com.cn/s/blog_8c388a3a0101dd15.html 〇.各种坐标系及其存在的原因: 要谈坐标系变换,那么坐标系有哪些呢?依次有:物体坐标系,世界坐标系,相机坐标系,投影坐标系以及屏幕坐标系.我要讨论的就是这些坐标系间的转换。...
  • SMF0504
  • SMF0504
  • 2016-09-25 11:56
  • 2466

基于单幅图像的2D转3D算法研究

最近,3D影片盛行,3D电视技术也层出不穷,3D技术在带给大家非凡的视觉冲击同时,也在告诉大家这背后隐藏了太多的商机。     目前的3D技术大体分为两种:软件技术和硬件技术。所谓硬件技术就是在拍摄影片时采用多摄像头及各种3D相关设备来拍摄片源;所谓软件技术就是将2D片...
  • Trent1985
  • Trent1985
  • 2013-11-07 13:21
  • 9203
    个人资料
    • 访问:88004次
    • 积分:1635
    • 等级:
    • 排名:千里之外
    • 原创:54篇
    • 转载:143篇
    • 译文:0篇
    • 评论:1条
    最新评论