"

From 2014.igem.org

@charset "UTF-8"; /**

* 
* @authors 晚茗 (huangm.ss.sysu@gmail.com)
* @date    2014-10-06 21:14:23
* @version $1.0$
*/

• {

margin: 0; padding: 0; } html{ width: 100%; height: 100%; background: -webkit-linear-gradient(top,#1b0634,#2d4292,#3494d8); overflow: hidden; } body{ width: 100%; height: 100%; background-image: url(images/bgLight.png); background-position: bottom center; background-repeat: no-repeat; } .screenCenter{ width: 912px; height: 500px; margin: auto; position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%,-50%);

 	-moz-transform: translate(-50%,-50%); 
 	-ms-transform: translate(-50%,-50%);  
 	transform: translate(-50%,-50%); 
	}

h1{ text-align: center; }

1. showpics{

margin-top: -80px; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .rotate{ -webkit-animation: rotate 20s linear 0s infinite; } .showpic{ position: absolute; top: 0; left: 0; }

1. showparts{

-webkit-transform: translateZ(0px); }

1. showdna{

left: -150px; top: 120px; -webkit-transform: translateZ(100px); }

1. showvector{

left: 150px; top: 140px; -webkit-transform: translateZ(150px);

} .scrollPosition{ position: absolute; left: 50%; bottom: 15px; -webkit-transform: translateX(-50%); } .scrolltip{ width: 40px; height: 63px; background-image: url(images/roll.png); -webkit-animation: float 2s infinite alternate; } @-webkit-keyframes rotate{ from{ -webkit-transform: rotateY(0deg); } to{ -webkit-transform: rotateY(360deg); } } @-webkit-keyframes float{ 0% {

   -webkit-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
   -moz-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
   -ms-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
   transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }
 50% {
   -webkit-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
   -moz-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
   -ms-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
   transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }
 100% {
   -webkit-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
   -moz-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
   -ms-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
   transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }

}