"
Team:CityU HK/lablog/project1.css
From 2014.igem.org
(Difference between revisions)
| Line 47: | Line 47: | ||
30% { | 30% { | ||
margin-top: 0; | margin-top: 0; | ||
| - | -webkit-transform: rotateX( | + | -webkit-transform: rotateX(70deg); |
-moz-transform: rotateX(0deg); | -moz-transform: rotateX(0deg); | ||
-o-transform: rotateX(0deg); | -o-transform: rotateX(0deg); | ||
| - | -ms-transform: rotateX( | + | -ms-transform: rotateX(0deg); |
| - | transform: rotateX( | + | transform: rotateX(70deg); |
} | } | ||
45% { | 45% { | ||
margin-top: 0; | margin-top: 0; | ||
-webkit-transform: rotateX(-30deg); | -webkit-transform: rotateX(-30deg); | ||
| - | -moz-transform: rotateX( | + | -moz-transform: rotateX(0deg); |
| - | -o-transform: rotateX( | + | -o-transform: rotateX(0deg); |
| - | -ms-transform: rotateX( | + | -ms-transform: rotateX(0deg); |
transform: rotateX(-30deg); | transform: rotateX(-30deg); | ||
} | } | ||
| Line 64: | Line 64: | ||
margin-top: 0; | margin-top: 0; | ||
-webkit-transform: rotateX(30deg); | -webkit-transform: rotateX(30deg); | ||
| - | -moz-transform: rotateX( | + | -moz-transform: rotateX(0deg); |
| - | -o-transform: rotateX( | + | -o-transform: rotateX(0deg); |
| - | -ms-transform: rotateX( | + | -ms-transform: rotateX(0deg); |
transform: rotateX(30deg); | transform: rotateX(30deg); | ||
} | } | ||
| Line 72: | Line 72: | ||
margin-top: 0; | margin-top: 0; | ||
-webkit-transform: rotateX(-15deg); | -webkit-transform: rotateX(-15deg); | ||
| - | -moz-transform: rotateX( | + | -moz-transform: rotateX(0deg); |
| - | -o-transform: rotateX( | + | -o-transform: rotateX(0deg); |
| - | -ms-transform: rotateX( | + | -ms-transform: rotateX(0deg); |
transform: rotateX(-15deg); | transform: rotateX(-15deg); | ||
} | } | ||
Revision as of 13:59, 20 June 2014
.block { width: 200px; color: #fff; margin: 35px auto; text-transform: uppercase; text-align: center; font-family: Helvetica; position: relative; perspective: 350; } .block .normal { background: gray; padding: 15px; cursor: pointer; position:relative; z-index:2; } .block .hover { background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none; position: relative; z-index:1; transition: all 250ms ease; } .block:hover .normal { background: #0084b4; }
.block:hover .hover { margin-top: 0; -webkit-transform-origin: top; -moz-transform-origin: top; -o-transform-origin: top; -ms-transform-origin: top; transform-origin: top;
-webkit-animation: balance 2s ease-in-out 150ms 1 alternate; -moz-animation: balance 1.5s ease-in-out 150ms 1 alternate; -ms-animation: balance 1.5s ease-in-out 150ms 1 alternate; -o-animation: balance 1.5s ease-in-out 150ms 1 alternate; animation: balance 1.5s ease-in-out 150ms 1 alternate; }
@keyframes "balance" {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
-webkit-transform: rotateX(-70deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(-70deg);
}
30% {
margin-top: 0;
-webkit-transform: rotateX(70deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(70deg);
}
45% {
margin-top: 0;
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-webkit-transform: rotateX(30deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(30deg);
}
75% {
margin-top: 0;
-webkit-transform: rotateX(-15deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@-moz-keyframes balance {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
-moz-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-moz-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-moz-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-moz-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {
margin-top: 0;
-moz-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@-webkit-keyframes "balance" {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
-webkit-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-webkit-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {
margin-top: 0;
-webkit-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@-ms-keyframes "balance" {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
-ms-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-ms-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-ms-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-ms-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {
margin-top: 0;
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@-o-keyframes "balance" {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
-o-transform: rotateX(-50deg);
transform: rotateX(-50deg);
}
30% {
margin-top: 0;
-o-transform: rotateX(50deg);
transform: rotateX(50deg);
}
45% {
margin-top: 0;
-o-transform: rotateX(-35deg);
transform: rotateX(-30deg);
}
60% {
margin-top: 0;
-o-transform: rotateX(30deg);
transform: rotateX(30deg);
}
75% {
margin-top: 0;
-o-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
100% {
margin-top: 0;
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
