h
2
{
margin
:
40px
0px
;
}
ol:after{
content
:
""
;
display
:
block
;
clear
:
both
;
}
ol li{
border
:
1px
solid
#000000
;
width
:
140px
;
height
:
140px
;
background-color
:
#999999
;
margin
:
10px
;
float
:
left
;
fonxt-
size
:
12px
;
}
ol li b{
display
:
block
;
width
:
20px
;
height
:
20px
;
line-height
:
20px
;
text-align
:
center
;
color
:
#ffffff
;
background-color
:
#555555
;
}
#translate{
-webkit-transform: translate(
-40px
,
40px
);
-moz-transform: translate(
-40px
,
40px
);
-o-transform: translate(
-40px
,
40px
);
-ms-transform: translate(
-40px
,
40px
);
transform: translate(
-40px
,
40px
);
}
#translateX{
-webkit-transform: translatex(
-40px
);
-moz-transform: translatex(
-40px
);
-o-transform: translatex(
-40px
);
-ms-transform: translatex(
-40px
);
transform: translatex(
-40px
);
}
#translateY{
-webkit-transform: translatey(
-40px
);
-moz-transform: translatey(
-40px
);
-o-transform: translatey(
-40px
);
-ms-transform: translatey(
-40px
);
transform: translatey(
-40px
);
}
#scale{
-webkit-transform:scale(
1.4
);
}
#scaleX{
-webkit-transform:scaleX(
1.4
);
}
#scaleY{
-webkit-transform:scaleY(
1.4
);
}
#rotate{
-webkit-transform:rotate(
45
deg);
}
#skew{
-webkit-transform:skew(
15
deg,
15
deg);
}
#skewX{
-webkit-transform:skewX(
15
deg);
}
#skewY{
-webkit-transform:skewY(
15
deg);
}
#shorthand{
transform: rotate(
10
deg) scale(
1.2
) skew(
1
deg) translate(
-20px
);
-webkit-transform: rotate(
10
deg) scale(
1.2
) skew(
1
deg) translate(
-20px
);
-moz-transform: rotate(
10
deg) scale(
1.2
) skew(
1
deg) translate(
-20px
);
-o-transform: rotate(
10
deg) scale(
1.2
) skew(
1
deg) translate(
-20px
);
}
#origin{
-webkit-transform-origin:
right
bottom
;
transform: rotate(
10
deg) scale(
1.2
) skew(
1
deg) translate(
-20px
);
-webkit-transform: rotate(
10
deg) scale(
1.2
) skew(
1
deg) translate(
-20px
);
-moz-transform: rotate(
10
deg) scale(
1.2
) skew(
1
deg) translate(
-20px
);
-o-transform: rotate(
10
deg) scale(
1.2
) skew(
1
deg) translate(
-20px
);
}
#transition #transition_translate{
-webkit-transition-property: transform;
-moz-transition-property: transform;
-o-transition-property: transform;
transition-property: transform;
-webkit-transition-duration:
2
s;
-moz-transition-duration:
2
s;
-o-transition-duration:
2
s;
transition-duration:
2
s;
}
#transition #transition_translate:hover{
background-color
:
#bbbbbb
;
-webkit-transform:translate(
160px
);
}
#transition #transition_background{
-webkit-transition-property:background-color;
-webkit-transition-duration:
2
s;
background-color
:
#ff6666
;
}
#transition #transition_background:hover{
background-color
:
#6666ff
;
}
#transition #transition_delay{
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:
1
s;
-webkit-transition-delay:
1
s;
}
#transition #transition_delay:hover{
-webkit-transform:translate(
160px
);
}
#transition #transition_duration{
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:
5
s;
}
#transition #transition_duration:hover{
-webkit-transform:translate(
160px
);
}
#transition #transition_timing-function{
-webkit-transition-property:-webkit-transform;
-webkit-transition_timing-function:easy-in-out;
-webkit-transition-duration:
5
s;
}
#transition #transition_timing-function:hover{
-webkit-transform:translate(
80px
);
}
#transition #transition_all{
-webkit-transition-property:
all
;
-webkit-transition_timing-function:easy-in-out;
-webkit-transition-duration:
5
s;
}
#transition #transition_all:hover{
-webkit-transform:translate(
80px
);
opacity:
0.6
;
border
:
4px
solid
#0000ff
;
background-color
:
#ff0000
;
}