您的位置：首页 > Web前端 > HTML5

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

2017-01-03 16:00 941 查看

<!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> 下面的表格列出了所有的转换属性： <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(n,n,n,n,n,n)</td> <td>定义 2D 转换，使用六个值的矩阵。</td> </tr> <tr> <td>translate(x,y)</td> <td>定义 2D 转换，沿着 X 和 Y 轴移动元素。</td> </tr> <tr> <td>translateX(n)</td>
<td>定义 2D 转换，沿着 X 轴移动元素。</td> </tr> <tr> <td>translateY(n)</td> <td>定义 2D 转换，沿着 Y 轴移动元素。</td> </tr> <tr> <td>scale(x,y)</td> <td>定义 2D 缩放转换，改变元素的宽度和高度。</td> </tr> <tr> <td>scaleX(n)</td> <td>定义 2D 缩放转换，改变元素的宽度。</td> </tr> <tr> <td>scaleY(n)</td>
<td>定义 2D 缩放转换，改变元素的高度。</td> </tr> <tr> <td>rotate(angle)</td> <td>定义 2D 旋转，在参数中规定角度。</td> </tr> <tr> <td>skew(x-angle,y-angle)</td> <td>定义 2D 倾斜转换，沿着 X 和 Y 轴。</td> </tr> <tr> <td>skewX(angle)</td> <td>定义 2D 倾斜转换，沿着 X 轴。</td> </tr>
<tr> <td>skewY(angle)</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(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)</td>
<td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td> </tr> <tr> <td>translate3d(x,
4000
y,z)</td> <td>定义 3D 转化。</td> </tr> <tr> <td>translateX(x)</td> <td>定义 3D 转化，仅使用用于 X 轴的值。</td> </tr> <tr> <td>translateY(y)</td> <td>定义 3D 转化，仅使用用于 Y 轴的值。</td>
</tr> <tr> <td>translateZ(z)</td> <td>定义 3D 转化，仅使用用于 Z 轴的值。</td> </tr> <tr> <td>scale3d(x,y,z)</td> <td>定义 3D 缩放转换。</td> </tr> <tr> <td>scaleX(x)</td> <td>定义 3D 缩放转换，通过给定一个 X 轴的值。</td> </tr> <tr> <td>scaleY(y)</td>
<td>定义 3D 缩放转换，通过给定一个 Y 轴的值。</td> </tr> <tr> <td>scaleZ(z)</td> <td>定义 3D 缩放转换，通过给定一个 Z 轴的值。</td> </tr> <tr> <td>rotate3d(x,y,z,angle)</td> <td>定义 3D 旋转。</td> </tr> <tr> <td>rotateX(angle)</td> <td>定义沿 X 轴的 3D 旋转。</td>
</tr> <tr> <td>rotateY(angle)</td> <td>定义沿 Y 轴的 3D 旋转。</td> </tr> <tr> <td>rotateZ(angle)</td> <td>定义沿 Z 轴的 3D 旋转。</td> </tr> <tr> <td>perspective(n)</td> <td>定义 3D 转换元素的透视视图。</td> </tr> </table> </div> </body> </html>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航