关闭

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

298人阅读 评论(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网站的观点或立场
    个人资料
    • 访问:57568次
    • 积分:1312
    • 等级:
    • 排名:千里之外
    • 原创:53篇
    • 转载:141篇
    • 译文:0篇
    • 评论:1条
    最新评论