-
-
Save IngwiePhoenix/30afe0160fe0eb61d1bf to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=0" /> | |
<title>Cube 2 - show sides · Intro to CSS 3D transforms › Examples</title> | |
<style media="screen"> | |
.container { | |
width: 800px; | |
height: 800px; | |
position: relative; | |
margin: 0 auto 40px; | |
border: 1px solid #CCC; | |
-webkit-perspective: 1000px; | |
-moz-perspective: 1000px; | |
-o-perspective: 1000px; | |
perspective: 1000px; | |
} | |
#cube { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
-webkit-transform-style: preserve-3d; | |
-moz-transform-style: preserve-3d; | |
-o-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
-webkit-transition: -webkit-transform 1s; | |
-moz-transition: -moz-transform 1s; | |
-o-transition: -o-transform 1s; | |
transition: transform 1s; | |
} | |
#cube figure { | |
display: block; | |
position: absolute; | |
width: 784px; | |
height: 784px; | |
border: 2px solid black; | |
line-height: 700px; | |
font-size: 700px; | |
font-weight: bold; | |
color: white; | |
text-align: center; | |
} | |
#cube.panels-backface-invisible figure { | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
-o-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
#cube .front { background: hsla( 0, 100%, 50%, 0.7 ); } | |
#cube .back { background: hsla( 60, 100%, 50%, 0.7 ); } | |
#cube .right { background: hsla( 120, 100%, 50%, 0.7 ); } | |
#cube .left { background: hsla( 180, 100%, 50%, 0.7 ); } | |
#cube .top { background: hsla( 240, 100%, 50%, 0.7 ); } | |
#cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); } | |
#cube .front { | |
-webkit-transform: translateZ( 400px ); | |
-moz-transform: translateZ( 400px ); | |
-o-transform: translateZ( 400px ); | |
transform: translateZ( 400px ); | |
} | |
#cube .back { | |
-webkit-transform: rotateX( -180deg ) translateZ( 400px ); | |
-moz-transform: rotateX( -180deg ) translateZ( 400px ); | |
-o-transform: rotateX( -180deg ) translateZ( 400px ); | |
transform: rotateX( -180deg ) translateZ( 400px ); | |
} | |
#cube .right { | |
-webkit-transform: rotateY( 90deg ) translateZ( 400px ); | |
-moz-transform: rotateY( 90deg ) translateZ( 400px ); | |
-o-transform: rotateY( 90deg ) translateZ( 400px ); | |
transform: rotateY( 90deg ) translateZ( 400px ); | |
} | |
#cube .left { | |
-webkit-transform: rotateY( -90deg ) translateZ( 400px ); | |
-moz-transform: rotateY( -90deg ) translateZ( 400px ); | |
-o-transform: rotateY( -90deg ) translateZ( 400px ); | |
transform: rotateY( -90deg ) translateZ( 400px ); | |
} | |
#cube .top { | |
-webkit-transform: rotateX( 90deg ) translateZ( 400px ); | |
-moz-transform: rotateX( 90deg ) translateZ( 400px ); | |
-o-transform: rotateX( 90deg ) translateZ( 400px ); | |
transform: rotateX( 90deg ) translateZ( 400px ); | |
} | |
#cube .bottom { | |
-webkit-transform: rotateX( -90deg ) translateZ( 400px ); | |
-moz-transform: rotateX( -90deg ) translateZ( 400px ); | |
-o-transform: rotateX( -90deg ) translateZ( 400px ); | |
transform: rotateX( -90deg ) translateZ( 400px ); | |
} | |
#cube.show-front { | |
-webkit-transform: translateZ( -400px ); | |
-moz-transform: translateZ( -400px ); | |
-o-transform: translateZ( -400px ); | |
transform: translateZ( -400px ); | |
} | |
#cube.show-back { | |
-webkit-transform: translateZ( -400px ) rotateX( -180deg ); | |
-moz-transform: translateZ( -400px ) rotateX( -180deg ); | |
-o-transform: translateZ( -400px ) rotateX( -180deg ); | |
transform: translateZ( -400px ) rotateX( -180deg ); | |
} | |
#cube.show-right { | |
-webkit-transform: translateZ( -400px ) rotateY( -90deg ); | |
-moz-transform: translateZ( -400px ) rotateY( -90deg ); | |
-o-transform: translateZ( -400px ) rotateY( -90deg ); | |
transform: translateZ( -400px ) rotateY( -90deg ); | |
} | |
#cube.show-left { | |
-webkit-transform: translateZ( -400px ) rotateY( 90deg ); | |
-moz-transform: translateZ( -400px ) rotateY( 90deg ); | |
-o-transform: translateZ( -400px ) rotateY( 90deg ); | |
transform: translateZ( -400px ) rotateY( 90deg ); | |
} | |
#cube.show-top { | |
-webkit-transform: translateZ( -400px ) rotateX( -90deg ); | |
-moz-transform: translateZ( -400px ) rotateX( -90deg ); | |
-o-transform: translateZ( -400px ) rotateX( -90deg ); | |
transform: translateZ( -400px ) rotateX( -90deg ); | |
} | |
#cube.show-bottom { | |
-webkit-transform: translateZ( -400px ) rotateX( 90deg ); | |
-moz-transform: translateZ( -400px ) rotateX( 90deg ); | |
-o-transform: translateZ( -400px ) rotateX( 90deg ); | |
transform: translateZ( -400px ) rotateX( 90deg ); | |
} | |
</style> | |
<script> | |
function rotate(side) { document.getElementById("cube").setAttribute("class","panels-backface-invisible show-"+side); } | |
</script> | |
</head> | |
<body> | |
<section class="container"> | |
<div id="cube" class="panels-backface-invisible show-front"> | |
<figure class="front">1</figure> | |
<figure class="back">2</figure> | |
<figure class="right">3</figure> | |
<figure class="left">4</figure> | |
<figure class="top">5</figure> | |
<figure class="bottom">6</figure> | |
</div> | |
</section> | |
<br><br> | |
<a href="javascript:rotate('top')">Top!</a> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment