217 lines
3.6 KiB
CSS
217 lines
3.6 KiB
CSS
/*Styles used for the various demonstration divs that need to be vendor prefixed*/
|
|
.TransformDemoPerspective200 {
|
|
-ms-perspective: 200px;
|
|
}
|
|
|
|
.TransformDemoPerspectiveOrigin3050 {
|
|
-ms-perspective-origin: 30% 50%;
|
|
}
|
|
|
|
.TransformDemoPerspectiveOrigin8050 {
|
|
-ms-perspective-origin: 80% 50%;
|
|
}
|
|
|
|
.TransformDemoDivRotate45 {
|
|
}
|
|
|
|
.TransformDemoDivRotate45:hover {
|
|
-ms-transform: rotate(45deg);
|
|
}
|
|
|
|
.TransformDemoDivSkewX45:hover {
|
|
-ms-transform: skewX(45deg);
|
|
}
|
|
|
|
.Transform3DDemoDivRotateX:hover {
|
|
-ms-transform: rotateX(45deg);
|
|
}
|
|
|
|
.Transform3DDemoDivRotateY:hover {
|
|
-ms-transform: rotateY(45deg);
|
|
}
|
|
|
|
.Transform3DDemoDivTranslateZ:hover {
|
|
-ms-transform: translateZ(-50px);
|
|
}
|
|
|
|
.Transform3DDemoDivRotateYTranslateZ:hover {
|
|
-ms-transform: rotateY(45deg) translateZ(-50px);
|
|
}
|
|
.Transform3DDemoDivTranslateZRotateY:hover {
|
|
-ms-transform: translateZ(-50px) rotateY(45deg);
|
|
}
|
|
|
|
@-ms-keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes fadeOutInOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
opacity: 0;
|
|
}
|
|
75% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes fadeOutInOutSwirl {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
opacity: 0.5;
|
|
-ms-transform: rotateZ(0deg);
|
|
}
|
|
75% {
|
|
opacity: 0.5;
|
|
-ms-transform: rotateZ(180deg);
|
|
}
|
|
100% {
|
|
opacity: 1.0;
|
|
-ms-transform: rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
@-ms-keyframes fullPageInOut {
|
|
50% {
|
|
opacity: 0.5;
|
|
-ms-transform: scale(0.1) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
.TransformDemoDivFadeOut:hover {
|
|
-ms-animation-duration: 2s;
|
|
-ms-animation-name: fadeOut;
|
|
}
|
|
|
|
.TransformDemoDivFadeOutInOut:hover {
|
|
-ms-animation-duration: 2s;
|
|
-ms-animation-name: fadeOutInOut;
|
|
}
|
|
|
|
.TransformDemoDivFadeOutInOutSwirl:hover {
|
|
-ms-animation-duration: 2s;
|
|
-ms-animation-name: fadeOutInOutSwirl;
|
|
}
|
|
|
|
.TransformTranslateX400px {
|
|
-ms-transform: translateX(400px);
|
|
}
|
|
|
|
.TransformTranslateY300px {
|
|
-ms-transform: translateY(300px);
|
|
}
|
|
|
|
.TransformRotate45 {
|
|
-ms-transform: rotate(45deg);
|
|
}
|
|
|
|
.TransformRotateMinus35 {
|
|
-ms-transform: rotate(-35deg);
|
|
}
|
|
|
|
.TransformSkewX25 {
|
|
-ms-transform: skewX(25deg);
|
|
}
|
|
|
|
.TransformSkewY25 {
|
|
-ms-transform: skewY(25deg);
|
|
}
|
|
|
|
.TransformScale075 {
|
|
-ms-transform: scale(0.75);
|
|
}
|
|
|
|
.TransformScaleX075 {
|
|
-ms-transform: scaleX(0.75);
|
|
}
|
|
|
|
.TransformScaleY075 {
|
|
-ms-transform: scaleY(0.75);
|
|
}
|
|
|
|
.TransformScaleX125 {
|
|
-ms-transform: scaleX(1.25);
|
|
}
|
|
|
|
.TransformScaleY125 {
|
|
-ms-transform: scaleY(1.25);
|
|
}
|
|
|
|
.TransformRotate45TranslateX200px {
|
|
-ms-transform: rotate(45deg) translateX(200px);
|
|
}
|
|
|
|
.TransformTranslateX200pxRotate45 {
|
|
-ms-transform: translateX(200px) rotate(45deg);
|
|
}
|
|
|
|
.TransformOrigin0050 {
|
|
-ms-transform-origin: 0% 50%;
|
|
}
|
|
|
|
.TransformOrigin0000 {
|
|
-ms-transform-origin: 0% 0%;
|
|
}
|
|
|
|
.TransformOrigin00100 {
|
|
-ms-transform-origin: 0% 100%;
|
|
}
|
|
|
|
.TransformOrigin100100 {
|
|
-ms-transform-origin: 100% 100%;
|
|
}
|
|
|
|
.TransformOrigin2525 {
|
|
-ms-transform-origin: 25% 25%;
|
|
}
|
|
|
|
.TransformOrigin5000 {
|
|
-ms-transform-origin: 50% 0%;
|
|
}
|
|
|
|
.TransformOrigin50100 {
|
|
-ms-transform-origin: 50% 100%;
|
|
}
|
|
|
|
.TransformOrigin6666 {
|
|
-ms-transform-origin: 66% 66%;
|
|
}
|
|
|
|
.AnimationTimingEase {
|
|
-ms-animation-timing-function: ease;
|
|
}
|
|
|
|
.AnimationTimingEaseIn {
|
|
-ms-animation-timing-function: ease-in;
|
|
}
|
|
|
|
.AnimationTimingEaseOut {
|
|
-ms-animation-timing-function: ease-out;
|
|
}
|
|
|
|
.AnimationTimingEaseInOut {
|
|
-ms-animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
.AnimationTimingLinear {
|
|
-ms-animation-timing-function: linear;
|
|
}
|
|
|
|
.Animation3Iterations {
|
|
-ms-animation-iteration-count: 3;
|
|
}
|
|
|