Team:IIT Delhi/javascript

From 2014.igem.org

(Difference between revisions)
 
(9 intermediate revisions not shown)
Line 1: Line 1:
-
{{CSS/Main}}
 
-
{{CSS/javascript}}
 
-
 
-
 
<html>
<html>
<head>
<head>
-
<title>js</title>
+
<title>third</title>
-
</head>
+
<style>
 +
body
 +
{
 +
    -webkit-transform: translate3d(0, 0, 0);
 +
        -ms-transform: translate3d(0, 0, 0);
 +
}
 +
 
 +
.most-inner
 +
{
 +
    z-index: 99;
 +
 
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.most-inner:hover
 +
{
 +
    -webkit-transform: rotate3d(-45, -45, 0, 180deg);
 +
            transform: rotate3d(-45, -45, 0, 180deg);
 +
 
 +
    opacity: 1;
 +
 
 +
 
 +
 
 +
}
 +
 
 +
.inner-one
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-one:hover
 +
{
 +
    -webkit-transform: rotate3d(45, 45, 0, 180deg);
 +
            transform: rotate3d(45, 45, 0, 180deg);
 +
 
 +
    opacity: .85;
 +
 
 +
 
 +
}
 +
 
 +
.inner-two
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-two:hover
 +
{
 +
    -webkit-transform: rotate3d(90, 90, 0, 180deg);
 +
            transform: rotate3d(90, 90, 0, 180deg);
 +
 
 +
 
 +
}
 +
 
 +
.inner-three
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-three:hover
 +
{
 +
    -webkit-transform: rotate3d(135, -135, 0, 180deg);
 +
            transform: rotate3d(135, -135, 0, 180deg);
 +
 
 +
 
 +
}
 +
 
 +
.inner-four
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-four:hover
 +
{
 +
    -webkit-transform: rotate3d(-180, -180, 0, -180deg);
 +
            transform: rotate3d(-180, -180, 0, -180deg);
 +
 
 +
 
 +
}
 +
 
 +
.inner-five
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-five:hover
 +
{
 +
    -webkit-transform: rotate3d(-270, -270, 0, -180deg);
 +
            transform: rotate3d(-270, -270, 0, ---180deg);---------
 +
 
 +
 
 +
}
 +
.inner-six
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-six:hover
 +
{
 +
    -webkit-transform: rotate3d(-315, 315, 0, -180deg);
 +
            transform: rotate3d(-315, 315, 0, --180deg);-------
 +
 
 +
 
 +
}
 +
.inner-seven
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-seven:hover
 +
{
 +
    -webkit-transform: rotate3d(360, -360, 0, -180deg);
 +
            transform: rotate3d(360, -360, 0, ---180deg);-------
 +
 
 +
 
 +
}
 +
.inner-eight
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-eight:hover
 +
{
 +
    -webkit-transform: rotate3d(315, -315, 0, -180deg);
 +
            transform: rotate3d(315, -315, 0, --180deg);-----
 +
 
 +
 
 +
}
 +
.inner-nine
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-nine:hover
 +
{
 +
    -webkit-transform: rotate3d(270, -270, 0, -180deg);
 +
            transform: rotate3d(270, -270, 0, ---180deg);-----
 +
 
 +
 
 +
}
 +
.inner-ten
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-ten:hover
 +
{
 +
    -webkit-transform: rotate3d(225, -225, 0, -180deg);
 +
            transform: rotate3d(225, -225, 0, --180deg);---
 +
 
 +
 
 +
}.inner-eleven
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-eleven:hover
 +
{
 +
    -webkit-transform: rotate3d(180, -180, 0, -180deg);
 +
            transform: rotate3d(180, -180, 0, ---180deg);---
 +
 
 +
 
 +
}.inner-twelve
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-twelve:hover
 +
{
 +
    -webkit-transform: rotate3d(125, -125, 0, -180deg);
 +
            transform: rotate3d(125, -125, 0, --180deg);-
 +
 
 +
 
 +
}.inner-thirteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-thirteen:hover
 +
{
 +
    -webkit-transform: rotate3d(90, -90, 0, -180deg);
 +
            transform: rotate3d(90, -90, 0, --180deg);-
 +
 
 +
 
 +
}.inner-fourteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-fourteen:hover
 +
{
 +
    -webkit-transform: rotate3d(45, -45, 0, -180deg);
 +
            transform: rotate3d(45, -45, 0, -180deg);
 +
 
 +
 
 +
}.inner-fifteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-fifteen:hover
 +
{
 +
    -webkit-transform: rotate3d(90, -90, 0, 180deg);
 +
            transform: rotate3d(90, -90, 0, 180deg);
 +
 
 +
 
 +
}.inner-sixteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-sixteen:hover
 +
{
 +
    -webkit-transform: rotate3d(135, -135, 0, 180deg);
 +
            transform: rotate3d(135, -135, 0, 180deg);
 +
 
 +
 
 +
}.inner-seventeen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-seventeen:hover
 +
{
 +
    -webkit-transform: rotate3d(180, -180, 0, 180deg);
 +
            transform: rotate3d(180, -180, 0, 180deg);
 +
 
 +
 
 +
}
 +
.inner-eighteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-eighteen:hover
 +
{
 +
    -webkit-transform: rotate3d(225, -225, 0, 180deg);
 +
            transform: rotate3d(225, -225, 0, 180deg);
 +
 
 +
 
 +
}.inner-nineteen
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-nineteen:hover
 +
{
 +
    -webkit-transform: rotate3d(270, -270, 0, 180deg);
 +
            transform: rotate3d(270, -270, 0, 180deg);
 +
 
 +
 
 +
}
 +
 
 +
.inner-twenty
 +
{
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 2px;
 +
 
 +
    transition: transform 6500ms;
 +
 
 +
    opacity: .85;
 +
    border: 3px solid #112233;
 +
    border-radius: 50%;
 +
    background: #fff;
 +
 
 +
    transform-style: preserve-3d;
 +
    -webkit-backface-visibility: visible;
 +
            backface-visibility: visible;
 +
}
 +
 
 +
.inner-twenty:hover
 +
{
 +
    -webkit-transform: rotate3d(315, -315, 0, 180deg);
 +
            transform: rotate3d(315, -315, 0, 180deg);
 +
 
 +
 
 +
}
 +
 
 +
.container
 +
{
 +
    width: 300px;
 +
    height: 300px;
 +
    margin: 1%;
 +
 
 +
    -webkit-transform: translate3d(0,0,0);
 +
 
 +
            perspective: 1000px;
 +
    -webkit-perspective: 1000px;
 +
}
 +
 
 +
</style>
<body>
<body>
-
<script>
+
<div class="container">
-
</script>
+
<div class="inner-two">
-
<h1><span>I</span><span>G</span><span>E</span><span>M</span><span>-</span><span>I</span><span>I</span><span>T</span><span>D</span><span>E</span><span>L</span><span>H</span><span>I</span></h1>
+
<div class="inner-three">
 +
<div class="inner-four">
 +
<div class="inner-five">
 +
<div class="inner-six">
 +
<div class="inner-seven">
 +
<div class="inner-eight">
 +
<div class="inner-nine">
 +
<div class="inner-ten">
 +
<div class="inner-eleven">
 +
<div class="inner-twelve">
 +
<div class="inner-thirteen">
 +
<div class="inner-fourteen">
 +
<div class="inner-fifteen">
 +
<div class="inner-sixteen">
 +
<div class="inner-seventeen">
 +
<div class="inner-eighteen">
 +
<div class="inner-nineteen">
 +
<div class="inner-twenty">         
 +
<div class="most-inner">
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 
</body>
</body>
 +
</html>
</html>

Latest revision as of 13:27, 19 May 2015

third

Retrieved from "http://2014.igem.org/Team:IIT_Delhi/javascript"