Difference between revisions of "Team:Tongji-Software/Team"

Line 192: Line 192:
 
}
 
}
  
−
.forward img {
+
 
−
width:250px;
+
div.flip-3d {
−
height:400px;
+
perspective:1200px;
−
display:block;
+
width:30%;
−
/*去除多余边框*/
+
float:left;
 
}
 
}
−
#pic {
+
div.flip-3d figure {
−
width:1200px;
+
−
margin:50px auto 0;
+
−
}
+
−
#pic ul {
+
 
position:relative;
 
position:relative;
 +
transform-style:preserve-3d;
 +
transition:1s transform;
 +
font-size:1.6rem;
 
}
 
}
−
#pic .bar li {
+
div.flip-3d
−
width:250px;
+
            figure img {
−
height:400px;
+
width:100%;
−
float:left;
+
height:auto;
−
margin-right:30px;
+
 
}
 
}
−
#pic ul li a {
+
div.flip-3d figure figcaption {
−
width:250px;
+
position:absolute;
−
height:400px;
+
width:100%;
 +
height:100%;
 +
top:0;
 +
transform:rotateY(.5turn)
 +
            translateZ(1px);
 +
background:rgba(255,255,255,0.9);
 +
text-align:center;
 +
padding-top:45%;
 +
opacity:0.6;
 +
transition:1s .5s opacity;
 +
}
 +
div.flip-3d:hover
 +
            figure {
 +
transform:rotateY(.5turn);
 +
}
 +
div.flip-3d:hover figure figcaption {
 +
opacity:1;
 +
}
 +
div.flip-3d figure:after {
 +
content:" ";
 
display:block;
 
display:block;
−
position:relative;
+
height:8vw;
−
/*远近度*/
+
width:100%;
−
perspective:400px;
+
transform:rotateX(90deg);
−
transition:all 1s;
+
background-image:radial-gradient(ellipse closest-side,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
 
}
 
}
−
#pic ul li a>div {
+
@media screen and (max-width:800px) {
−
transition:all 1s;
+
div#flip-3d {
−
/*背面不可视*/
+
perspective-origin:center top;
−
backface-visibility:hidden;
+
 
}
 
}
−
#pic ul li a:hover .forward {
+
div#flip-3d figure {
−
transform:rotateY(180deg);
+
float:none;
 +
width:50%;
 +
margin:0 auto;
 +
margin-bottom:12vw;
 
}
 
}
−
.tips {
+
div.flip-3d figure figcaption {
−
width:250px;
+
font-size:0.8rem;
−
height:400px;
+
−
color:#fff;
+
−
background:linear-gradient(#333,#666);
+
−
transform:rotateY(180deg);
+
−
transition:all 1s;
+
−
position:absolute;
+
−
top:0px;
+
−
left:0px;
+
 
}
 
}
−
.tips p {
+
div#flip-3d figure:last-child {
−
text-indent:2em;
+
display:none;
−
line-height:1.5em;
+
−
padding:20px;
+
−
font-size:18px;
+
−
font-weight:400px;
+
 
}
 
}
−
#pic ul li a:hover .tips {
 
−
transform:none;
 
−
box-shadow:0 0 10px 5px pink;
 
−
border-radius:10px;
 
 
}
 
}
−
 
  
 
</style>
 
</style>
Line 318: Line 320:
 
       </span>
 
       </span>
  
−
<div id="pic">
+
<div class="jq22-container">  
−
    <ul class="bar">
+
          <div class="jq22-content">
−
        <li>
+
             <div class="flip-3d">
−
             <a>
+
              <figure> <img src="https://static.igem.org/mediawiki/2018/b/ba/T--Tongji-Software--Team-Anne.jpeg" width="100%">
−
                <div class="forward">
+
                 <figcaption> Mouse </figcaption>
−
                    <img src="https://static.igem.org/mediawiki/2018/8/83/T--Tongji-Software--Team-Haiyan.jpeg" width= "100%">
+
              </figure>
−
                 </div>
+
             </div>
−
                <div class="tips">
+
          </div>
−
                    <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>
+
</div>
−
                </div>
+
−
             </a>
+
−
        </li>
+
−
      </ul>
+
−
</div>
+
−
 
+
  
 
<span class="h1" id="Instructors">  
 
<span class="h1" id="Instructors">  

Revision as of 05:29, 4 October 2018

    •
Team
Overview
 The collective is the source of power and the cradle of wisdom. Our team is consisted of different people with same passion for inter-discipline. Differences make the team integrated. Some of us were best friends before iGEM 2018. Some of us didn’t even meet. We are from various majors, biology, biotechnology, bioinformatics, computer engineering & design. Since we only have seven team members, each of us has made great difference in our project. Team members
Mouse
Instructors