2D conversion
. 1 , Translate () method
By translate () method, the element is moved from its current position, according to a given left ( X -coordinate) and the Top ( Y -coordinate) location parameters:
Examples
div
{
transform: translate(50px,100px);
}
Value translate (50px, 100px) the elements move from the left 50 pixels, from the top of the mobile 100 pixels.
2 , Rotate () method
By () Rotate the rotation angle given method, the element clockwise. Allow negative element rotates counterclockwise.
Examples
div
{
transform: rotate(30deg);
｝
Value rotate (30deg) the clockwise rotation of the element 30 degrees.
. 3 , Scale () method
By scale () method, the size of the element increases or decreases according to a given width ( X- (axis) and the height Y parameters axis):
Examples
div
{
transform: scale(2,4);
｝
Value scale (2,4) to convert the original size of a width of 2 times the height of the height into the original 4 -fold.
4 , Skew () method
By skew () method, flip element given angle, according to a given horizontal line ( X- axis) and vertical lines ( the Y axis) parameters:
Examples
iv
{
transform: skew(30deg,20deg);
｝
Value skew (30deg, 20deg) about X to invert shaft element 30 degrees about the Y tilting axis 20 degrees.
. 5 , Matrix () method
matrix () method all 2D together conversion method.
matrix () method requires six parameters including math functions that allow you to: rotate, zoom, and tilt the mobile element.
Examples
How to use the matrix method div element rotated 30 degrees:
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
｝
2D Transform method
| function |
description |
| matrix(n,n,n,n,n,n) |
The definition 2D conversion, using a matrix of six values. |
| translate(x,y) |
Define 2D conversion, along the X and Y -axis moving element. |
| translateX(n) |
Define 2D conversion, along the X -axis moving element. |
| translateY(n) |
Define 2D conversion, along the Y moving element axis. |
| scale(x,y) |
Defined 2D scale transformation, changing the width and height of the element. |
| scaleX(n) |
Defined 2D scale transformation, changing the width of the element. |
| scaleY(n) |
The definition 2D scale transformation, changing the height of the element. |
| rotate(angle) |
Define 2D rotated a predetermined angle in the parameters. |
| skew ( x-angle , y-angle ) |
Defined 2D skew transformation along the X and Y axes. |
| skewX(angle) |
Defined 2D skew transformation along the X -axis. |
| skewY(angle) |
Defined 2D skew transformation along the Y -axis. |
3D conversion
rotateY () rotation
By () rotateY method, the element about its Y axis to a given degree of rotation.
Examples
div
{
transform: rotateY(130deg);
｝
Conversion property
The following table lists all the attributes of conversion:
| Attributes |
description |
CSS |
| transform |
Application to the element 2D or 3D conversion. |
3 |
| transform-origin |
It allows you to change the position of the element to be converted. |
3 |
| transform-style |
How to predetermined elements are nested 3D display space. |
3 |
| perspective |
Predetermined 3D perspective effect element. |
3 |
| perspective-origin |
Predetermined 3D bottom position of the element. |
3 |
| backface-visibility |
Defined element is visible when not facing the screen. |
3 |
2D Transform method
| function |
description |
| matrix3d(n,n,n,n,n,n, |
Define 3D conversion, using the 16 values of the 4x4 matrix. |
| translate3d(x,y,z) |
Defined 3D transformation. |
| translateX(x) |
Define 3D conversion using only X value of the axis. |
| translateY(y) |
Define 3D conversion using only Y value of the axis. |
| translateZ ( a ) |
Defined 3D transformation, only a Z value of the axis. |
| scale3d(x,y,z) |
The definition 3D scale transformation. |
| scaleX(x) |
Define 3D scaling transformation, by a given X value axis. |
| scaleY(y) |
Define 3D scaling transformation, given by a Y value axis. |
| scaleZ(z) |
Define 3D scaling transformation, given by a Z value of the axis. |
| rotate3d(x,y,z,angle) |
The definition 3D rotation. |
| rotateX(angle) |
Defined along the X -axis 3D rotation. |
| rotateY(angle) |
Defined along the Y -axis 3D rotation. |
| rotateZ(angle) |
Defined along the Z -axis 3D rotation. |
| perspective(n) |
Define 3D converting a perspective view of the elements. |
CSS3 transition
How does it work?
CSS3 transition is an element gradually change from one style to another effect.
To achieve this, two things must be defined:
Ÿ states that you want to add effects to which CSS attributes on
Ÿ When the effect of the provisions of long
Examples
Width property of transition effects applied when the length of 2 second:
div
{
transition: width 2s;
｝
Note: If the duration is not specified, there will be no transition effects, because the default value is 0 .
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：
实例
规定当鼠标指针悬浮于 <div> 元素上时
div:hover
{
width:300px;
}
注释：当指针移出元素时，它会逐渐变回原来的样式。
多项改变
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
实例
向宽度、高度和转换添加过渡效果：
div
{
transition: width 2s, height 2s, transform 2s;
｝
过渡属性
下面的表格列出了所有的转换属性：
| 属性 |
描述 |
CSS |
| transition |
简写属性，用于在一个属性中设置四个过渡属性。 |
3 |
| transition-property |
规定应用过渡的 CSS 属性的名称。 |
3 |
| transition-duration |
定义过渡效果花费的时间。默认是 0。 |
3 |
| transition-timing-function |
规定过渡效果的时间曲线。默认是 "ease"。 |
3 |
| transition-delay |
规定过渡效果何时开始。默认是 0。 |
3 |
面的两个例子设置所有过渡属性：
实例
在一个例子中使用所有过渡属性：
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
｝
实例
与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：
div
{
transition: width 1s linear 2s;
｝
CSS3 动画
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
实例
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
CSS3 动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
Ÿ 规定动画的名称
Ÿ 规定动画的时长
实例
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div
{
animation: myfirst 5s;
｝
注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
实例
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
实例
改变背景色和位置：
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 |
描述 |
CSS |
| @keyframes |
规定动画。 |
3 |
| animation |
所有动画属性的简写属性，除了 animation-play-state 属性。 |
3 |
| animation-name |
规定 @keyframes 动画的名称。 |
3 |
| animation-duration |
规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
3 |
| animation-timing-function |
规定动画的速度曲线。默认是 "ease"。 |
3 |
| animation-delay |
规定动画何时开始。默认是 0。 |
3 |
| animation-iteration-count |
规定动画被播放的次数。默认是 1。 |
3 |
| animation-direction |
规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
3 |
| animation-play-state |
规定动画是否正在运行或暂停。默认是 "running"。 |
3 |
| animation-fill-mode |
规定对象动画时间之外的状态。 |
3 |
下面的两个例子设置了所有动画属性：
实例
运行名为 myfirst 的动画，其中设置了所有动画属性：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
｝
实例
与上面的动画相同，但是使用了简写的动画 animation 属性：
div
{
animation: myfirst 5s linear 2s infinite alternate;
｝
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
｝