Team:IIT Delhi/javascript
From 2014.igem.org
(Difference between revisions)
(3 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
<title>third</title> | <title>third</title> | ||
<style> | <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> | ||
+ | <div class="container"> | ||
+ | <div class="inner-two"> | ||
+ | <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