Team:XMU-China

From 2014.igem.org

(Difference between revisions)
Line 46: Line 46:
</div>
</div>
<div id="icon" style="position:absolute;"  >
<div id="icon" style="position:absolute;"  >
-
<a href="https://2014.igem.org/Team:XMU-China/p&p"><img src="https://static.igem.org/mediawiki/2014/6/6e/XMU-icon_1.png" class="icon" style="position:fixed; left: 150px; top: 390px;" width="100px;" height="100px;" /></a>
+
<a href="https://2014.igem.org/Team:XMU-China/p&p"><img src="https://static.igem.org/mediawiki/2014/6/6e/XMU-icon_1.png" id="icon1" class="icon" style="position:fixed; left: 150px; top: 390px;" width="100px;" height="100px;" onmouseover="moveout_1(this)" /></a>
-
<a href="https://2014.igem.org/Team:XMU-China/judging"><img src="https://static.igem.org/mediawiki/2014/3/36/XMU-icon_2.png" class="icon" style="position:fixed; left: 70px; top: 345px;" width="100px;" height="100px;" /></a>
+
<a href="https://2014.igem.org/Team:XMU-China/judging"><img src="https://static.igem.org/mediawiki/2014/3/36/XMU-icon_2.png" id="icon2" class="icon" style="position:fixed; left: 70px; top: 345px;" width="100px;" height="100px;" onmouseover="moveout_2(this)" /></a>
-
<a href="https://2014.igem.org/Team:XMU-China/safety"><img src="https://static.igem.org/mediawiki/2014/b/be/XMU-icon_3.png" class="icon" style="position:fixed; left: 150px; top: 300px;" width="100px;" height="100px;" /></a>
+
<a href="https://2014.igem.org/Team:XMU-China/safety"><img src="https://static.igem.org/mediawiki/2014/b/be/XMU-icon_3.png" id="icon3" class="icon" style="position:fixed; left: 150px; top: 300px;" width="100px;" height="100px;" onmouseover="moveout_3(this)" /></a>
-
<a href="https://2014.igem.org/Team:XMU-China/notebook"><img src="https://static.igem.org/mediawiki/2014/c/c2/XMU-icon_4.png" class="icon" style="position:fixed; left: 820px; top: 225px;" width="100px;" height="100px;" /></a>
+
<a href="https://2014.igem.org/Team:XMU-China/notebook"><img src="https://static.igem.org/mediawiki/2014/c/c2/XMU-icon_4.png" id="icon4" class="icon" style="position:fixed; left: 820px; top: 225px;" width="100px;" height="100px;"  onmouseover="moveout_4(this)" /></a>
-
<a href="https://2014.igem.org/Team:XMU-China/team"><img src="https://static.igem.org/mediawiki/2014/4/48/XMU-icon_5.png" class="icon" style="position:fixed; left: 740px; top: 270px;" width="100px;" height="100px;" /></a>
+
<a href="https://2014.igem.org/Team:XMU-China/team"><img src="https://static.igem.org/mediawiki/2014/4/48/XMU-icon_5.png" id="icon5" class="icon" style="position:fixed; left: 740px; top: 270px;" width="100px;" height="100px;" onmouseover="moveout_5(this)" /></a>
-
<a href="https://2014.igem.org/Team:XMU-China/project"><img src="https://static.igem.org/mediawiki/2014/0/00/XMU-icon_6.png" class="icon" style="position:fixed; left: 740px; top: 180px;" width="100px;" height="100px;" /></a>
+
<a href="https://2014.igem.org/Team:XMU-China/project"><img src="https://static.igem.org/mediawiki/2014/0/00/XMU-icon_6.png" id="icon6" class="icon" style="position:fixed; left: 740px; top: 180px;" width="100px;" height="100px;" onmouseover="moveout_6(this)" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/p&p"><img src="css/images/turn_1.png" id="turn1" class="turn" style="position:fixed; left: 150px; top: 390px; z-index:1" width="100px;" height="100px;" onmouseout="movein_1(this)" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/judging"><img src="css/images/turn_2.png" id="turn2" class="turn" style="position:fixed; left: 70px; top: 345px; z-index:1" width="100px;" height="100px;" onmouseout="movein_2(this)" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/safety"><img src="css/images/turn_3.png" id="turn3" class="turn" style="position:fixed; left: 150px; top: 300px; z-index:1" width="100px;" height="100px;" onmouseout="movein_3(this)"  /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/notebook"><img src="css/images/turn_4.png" id="turn4" class="turn" style="position:fixed; left: 820px; top: 225px; z-index:1" width="100px;" height="100px;" onmouseout="movein_4(this)"  /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/team"><img src="css/images/turn_5.png" id="turn5" class="turn" style="position:fixed; left: 740px; top: 270px; z-index:1" width="100px;" height="100px;" onmouseout="movein_5(this)"  /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/project"><img src="css/images/turn_6.png" id="turn6" class="turn" style="position:fixed; left: 740px; top: 180px; z-index:1" width="100px;" height="100px;" onmouseout="movein_6(this)"  /></a>
</div>
</div>
Line 59: Line 65:
<style type="text/css">
<style type="text/css">
-
  .icon {
+
  #homepage {
-
    transition: all 0.1s linear;
+
perspective:800;
-
    -ms-transition: all 0.2s linear;
+
perspective-0rigin: 50% 50%;
-
-moz-transition: all 0.1s linear; /* Firefox 4 */
+
overflow: hidden;
-
        -webkit-transition: all 0.2s linear; /* Safari and Chrome */
+
-
        -o-transition: all 0.2s linear; /* Opera */
+
  }
  }
-
  .icon:hover {
+
-
    transform:scaleY(0);
+
  #icon {
-
    -ms-transform:scaleY(-1);
+
transform-style: preserve-3d;
-
        -moz-transform:scaleY(-1); /* Firefox 4 */
+
-
        -webkit-transform:scaleY(-1); /* Safari and Chrome */
+
-
        -o-transform:scaleY(0=1); /* Opera */
+
  }
  }
 +
 +
  .icon{
 +
 +
transform-origin:center;
 +
-webkit-transform-origin:center;
 +
transition: all 0.2s linear;
 +
-ms-transition: all 0.2s linear;
 +
-moz-transition: all 0.2s linear; /* Firefox 4 */
 +
-webkit-transition: all 0.2s linear; /* Safari and Chrome */
 +
-o-transition: all 0.2s linear; /* Opera */
 +
}
 +
 +
  .turn {
 +
transform-origin:center;
 +
-webkit-transform-origin:center;
 +
transition: all 0.2s linear;
 +
-ms-transition: all 0.2s linear;
 +
-moz-transition: all 0.2s linear; /* Firefox 4 */
 +
-webkit-transition: all 0.2s linear; /* Safari and Chrome */
 +
-o-transition: all 0.2s linear; /* Opera */
 +
   
 +
transform:rotateX(90deg);
 +
-ms-transform:rotateX(90deg);
 +
-moz-transform:rotateX(90deg); /* Firefox 4 */
 +
-webkit-transform:rotateX(90deg); /* Safari and Chrome */
 +
-o-transform:rotateX(90deg); /* Opera */
 +
  }
 +
</style>
</style>
 +
 +
<script>
 +
function moveout_1(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn1");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
function movein_1(obj) {
 +
obj.style.transform="rotateX(90deg)";
 +
obj.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon1");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
}
 +
 +
function moveout_2(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn2");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
function movein_2(obj) {
 +
obj.style.transform="rotateX(90deg)";
 +
obj.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon2");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
}
 +
 +
function moveout_3(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn3");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
function movein_3(obj) {
 +
obj.style.transform="rotateX(90deg)";
 +
obj.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon3");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
}
 +
 +
function moveout_4(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn4");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
function movein_4(obj) {
 +
obj.style.transform="rotateX(90deg)";
 +
obj.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon4");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
}
 +
 +
function moveout_5(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn5");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
function movein_5(obj) {
 +
obj.style.transform="rotateX(90deg)";
 +
obj.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon5");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
}
 +
 +
function moveout_6(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn6");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
function movein_6(obj) {
 +
obj.style.transform="rotateX(90deg)";
 +
obj.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon6");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
}
 +
 +
 +
</script>
</body>
</body>
</html>
</html>

Revision as of 13:31, 4 October 2014

Team:XMU-China

Retrieved from "http://2014.igem.org/Team:XMU-China"