HTML5知典 26:86:68

matrix()

2017-04-22T14:07:19+09:00

matrix() 规定 2D 转换，使用六个值的矩阵。语法 matrix(a, b, c, d, tx, ty) 值值描述a规定X轴的缩放比例。b规定Y轴的倾斜角度。c规定X轴的倾斜角度。d规定Y轴的缩放比例。tx规定X轴的移动距离。

matrix3d()

2017-04-22T13:46:48+09:00

matrix3d() 规定3D转换，使用 16 个值的 4×4 矩阵。语法 matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) 值值描述a1、b1、c1、d1、a2、b2、c2、d2、a3、b3、c3、d3、d4规定线性转换。a4、b4、c4

perspective()

2017-04-22T13:46:49+09:00

perspective() 为 3D 转换元素定义透视视图。语法 perspective(n) 值值描述n一个值。它用来应用于元素的透视变换。如果它是 0 或负值，则应用没有透视变换。例子 HTML

rotate()

2017-04-22T14:19:00+09:00

rotate() 规定 2D 旋转，在参数中规定角度。语法 rotate(angle) 值值描述angle代表旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。例子 HTML

rotate3d()

2017-04-22T14:19:00+09:00

rotate3d() 规定3D 旋转。语法 rotate3d(x,y,z,angle) 值值描述x规定围绕X轴旋转的矢量值。y规定围绕Y轴旋转的矢量值。z规定围绕Z轴旋转的矢量值。angle规定旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。

rotateX()

2017-04-22T14:19:00+09:00

rotateX() 规定围绕X轴旋转。语法 rotateX(angle) 值值描述angle 代表旋转的角度。一个正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。例子 HTML

transform:rotateX(60deg)

rotateY()

2017-04-22T14:19:00+09:00

rotateY() 规定围绕Y轴旋转。语法 rotateY(angle) 值值描述angle 规定旋转的角度。正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。例子 HTML

transform:rotateX(60deg)

CSS .stage{ width:350px; height:50px; background:red; transform:rotateY(60deg);//沿着 Y 轴的3D旋转60度。 }

rotateZ()

2017-04-22T14:19:00+09:00

rotateZ() 规定围绕Z轴旋转。语法 rotateZ(angle) 值值描述angle 规定旋转的角度。正数的角度表示顺时针旋转，负数的角度表示逆时针旋转。例子 HTML

transform:rotateX(60deg)

scale()

2017-04-22T13:46:49+09:00

scale() 规定 2D 缩放转换。语法 scale(x) scale(x, y) 值值描述x规定X轴上的缩放比例。y规定Y轴上的缩放比例。例子 HTML

transform:scale(2)

CSS .stage{ width:100%; height:200px; background:#333; text-align:center; } .box{ display:inline-block; width:350px; height:50px; background:red; font-size:20px; color:#fff; transform:scale(2);//在中心位置处scale(2)倍。 }

scale3d()

2017-04-22T13:11:57+09:00

scale3d() 规定 3D 缩放转换。语法 scale3d(x, y, z) 值值描述x规定X轴上的缩放比例。。y规定Y轴上的缩放比例。。z规定Z轴上的缩放比例。。例子 HTML

transform:scale3d(2,1,3)

scaleX()

2017-04-22T14:19:00+09:00

scaleX() 规定X轴上的缩放。语法 scaleX(x) 值值描述x规定X轴上的缩放比例。例子 HTML

transform:scaleX(2)

scaleY()

2017-04-22T14:19:00+09:00

scaleY() 规定Y轴上的缩放。语法 scaleY(y) 值值描述y规定Y轴上的缩放比例。例子 HTML

transform:scaleY(2)

scaleZ()

2017-04-22T14:19:00+09:00

scaleZ() 规定Z轴上的缩放。语法 scaleZ(z) 值值描述z规定Z轴上的缩放比例。例子 HTML

transform:scaleZ(2)

skew()

2017-04-22T14:19:00+09:00

skew() 规定2D倾斜转换。语法 skew(x-angle) skew(x-angle,y-angle) 值值描述x-angle规定X轴的倾斜角度。y-angle规定Y轴的倾斜角度。例子 HTML

transform:skew(10deg,10deg)

skewX()

2017-04-22T14:18:06+09:00

skewX() 规定X轴上的倾斜转换。语法 skewX(angle) 值值描述angle规定倾斜角度。例子 HTML

transform:skewX(10deg)

skewY()

2017-04-22T14:17:09+09:00

skewY() 规定Y轴上的倾斜转换。语法 skewX(angle) 值值描述angle规定倾斜角度。例子 HTML

transform:skewY(10deg)

变形

2017-04-23T20:39:16+09:00

变形定义变形(Transform-)属性是一些对HTML元素进行线性仿射变形相关的CSS属性。概述变形包括2D变形和3D变形。具体常用的2D变形有以下5种： * 伸缩(scale) 使元素以相同的缩放中心点和基数沿水平方向、垂直方向或两个方向同时缩放。其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。

transform

2017-04-22T14:01:43+09:00

transform transform 属性规定元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法 transform: none|transform-functions; 值值描述none规定不进行转换。matrix()规定 2D 转换，使用六个值的矩阵。

transform-function

2017-04-22T14:02:43+09:00

transform-function 规定一个为了改变元素显示效果而应用到该元素上的函数，这些变换函数通常代表一类矩阵，最终如何显示出来决定于这些函数矩阵和元素每个点相乘的结果。列表值描述none

transform-origin

2017-04-22T14:16:31+09:00

transform-origin transform-origin 属性更改元素变形的原点。例如，rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素，进行变形，然后再用这个属性的值把元素translate回去)。

transform-style

2017-04-22T14:06:10+09:00

transform-style transform-style规定该元素的嵌套元素如何在3D空间中呈现。语法 transform-style: preserve-3d transform-style: flat transform-style: inherit 值值描述preserve-3d规定嵌套元素在三维空间内。flat规定嵌套元素位于此元素所在的平面内。

translate()

2017-04-22T14:09:24+09:00

translate() 规定平面移动。语法 translate(tx) translate(tx, ty) 值值描述tx规定X轴的移动距离。ty规定Y轴的移动距离,与tx同值的情况下可省略。例子 HTML

CSS .stage{ width:50px; height:50px; background:red; transform: translate(50%, 50%); }

translate3d()

2017-04-22T14:10:15+09:00

translate3d() 规定3D空间移动。语法 translate3d(x, y, z) 值值描述tx值或值，规定X轴的移动距离。。ty值或值，规定Y轴的移动距离。。tz，规定Z轴的移动距离。。

translateX()

2017-04-22T14:14:46+09:00

translateX() 规定X轴上的移动。语法 translateX(t) 值值描述t规定移动距离。例子 HTML

CSS .stage{width:100px;height:100px;} .box { width:50px; height:50px; background:red; animation:flipAround 4s infinite; transform-origin:right; } @keyframes 'flipAround' { 25% { transform-origin:right; animation-mode:forwards; transform:rotateY(-180deg); } 25.001% { transform-origin:bottom; transform:translateX(50px); //旋转轴的 X 坐标 50个像素。 } …

translateY()

2017-04-22T14:15:51+09:00

translateY() 规定Y轴上的移动。语法 translateY(t) 值值描述t规定移动距离。例子 HTML

translateZ()

2017-04-22T14:15:30+09:00

translateZ() 规定Z轴Z上的移动。语法 translateZ(t) 值值描述t规定Z轴的移动距离。例子 HTML

back

front