"
Team:BIT/style7.css
From 2014.igem.org
Liangxi627 (Talk | contribs) (Created page with ".ch-item3 { width: 180px; height: 180px; border-radius: 50%; position: relative; cursor: default; -webkit-perspective: 900px; -moz-perspective: 900px; -o-perspective: 900...") |
|||
| (2 intermediate revisions not shown) | |||
| Line 55: | Line 55: | ||
.ch-img-31 { | .ch-img-31 { | ||
| - | background-image:url(../ | + | background-image:url(https://static.igem.org/mediawiki/2014/9/9b/BIT_2_1.png); background-repeat:no-repeat; |
} | } | ||
.ch-img-32 { | .ch-img-32 { | ||
| - | background-image:url(../ | + | background-image:url(https://static.igem.org/mediawiki/2014/e/e8/BIT_2_2.png); background-repeat:no-repeat; |
} | } | ||
.ch-img-33 { | .ch-img-33 { | ||
| - | background-image:url(../ | + | background-image:url(https://static.igem.org/mediawiki/2014/d/db/BIT_2_3.png); background-repeat:no-repeat; |
} | } | ||
.ch-img-34 { | .ch-img-34 { | ||
| - | background-image:url(../img/ | + | background-image:url(https://static.igem.org/mediawiki/2014/2/24/BIT_2_4.png); background-repeat:no-repeat; |
| + | } | ||
| + | .ch-img-311 { | ||
| + | background-image:url(https://static.igem.org/mediawiki/2014/a/a3/BIT_ins_1.png); background-repeat:no-repeat; | ||
| + | } | ||
| + | |||
| + | .ch-img-321 { | ||
| + | background-image:url(https://static.igem.org/mediawiki/2014/7/7a/BIT_ins_2.png); background-repeat:no-repeat; | ||
| + | } | ||
| + | |||
| + | .ch-img-331 { | ||
| + | background-image:url(https://static.igem.org/mediawiki/2014/4/4b/BIT_ins_3.png); background-repeat:no-repeat; | ||
| + | } | ||
| + | |||
| + | .ch-img-341 { | ||
| + | background-image:url(https://static.igem.org/mediawiki/2014/9/9d/BIT_3_4.png); background-repeat:no-repeat; | ||
} | } | ||
Latest revision as of 21:26, 17 October 2014
.ch-item3 { width: 180px; height: 180px; border-radius: 50%; position: relative; cursor: default; -webkit-perspective: 900px; -moz-perspective: 900px; -o-perspective: 900px; -ms-perspective: 900px; perspective: 900px; } .ch-info3{ position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .ch-info3 > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; }
.ch-info3 .ch-info-front3 { box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3); }
.ch-info3 .ch-info-back3 { -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); background: #000; opacity: 0; }
.ch-img-31 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-32 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-33 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-34 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-311 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-321 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-331 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-img-341 {
background-image:url(
); background-repeat:no-repeat;
}
.ch-info3 h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; margin: 0 15px; padding: 60px 0 0 0;
font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); }
.ch-info3 p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); }
.ch-item3:hover .ch-info-front3 {
-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;
}
.ch-item3:hover .ch-info-back3 { -webkit-transform: rotate3d(1,0,0,0deg); -moz-transform: rotate3d(1,0,0,0deg); -o-transform: rotate3d(1,0,0,0deg); -ms-transform: rotate3d(1,0,0,0deg); transform: rotate3d(1,0,0,0deg); opacity: 1; }
