Skip to content

Instantly share code, notes, and snippets.

@brihershberger

brihershberger/index.html

Created September 12, 2012 18:05
Show Gist options
  • Save brihershberger/3708685 to your computer and use it in GitHub Desktop.
Save brihershberger/3708685 to your computer and use it in GitHub Desktop.
Download ZIP
Rotating Photo Gallery
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Rotating Gallery</title>
</head>
<body>
<div id="wrapper">
<div id="shape">
<div class="plane p1">1</div>
<div class="plane p2">2</div>
<div class="plane p3">3</div>
<div class="plane p4">4</div>
<div class="plane p5">5</div>
<div class="plane p6">6</div>
<div class="plane p7">7</div>
<div class="plane p8">8</div>
<div class="plane p9">9</div>
<div class="plane p10">10</div>
</div>
</div>
</body>
</html>
Raw
style.css
/*
This code, so far, only works in Safari and Chrome because of 3D capabilities, but will hopefully be followed soon by Firefox and Opera (IE, maybe?) soon. This could be an elegant way to display photos in a gallery or something of the like. Enjoy!
*/
body {
background: #EEE;
font-family: arial, helvetica, sans-serif;
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
margin: 0 auto;
-webkit-perspective: 800;
width: 600px;
margin: 150px auto 0 auto;
-webkit-perspective-origin: 50% 90px; /* takes an x and y value, allowing you to shift the origin of the perspective, independent of the 3D objects in the space. */
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-360deg); }
}
#shape {
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-border-radius: 3px;
-webkit-transform-style: preserve-3d; /*tells the element that all of its children should exist in the same 3D space, otherwise they would all be flattened into a 2D plane.*/
-webkit-animation: spin 20s infinite linear;
}
.plane {
position: absolute;
height: 150px;
width: 150px;
background-color: rgba(0,0,0,0.5);
text-align: center;
font-size: 8em;
color: white;
}
/* want to rotate them each around the y-axis and translate them out from the z-axis */
#shape .p1 {-webkit-transform: translateZ(250px);}
#shape .p2 {-webkit-transform: rotateY(36deg) translateZ(250px);}
#shape .p3 {-webkit-transform: rotateY(72deg) translateZ(250px);}
#shape .p4 {-webkit-transform: rotateY(108deg) translateZ(250px);}
#shape .p5 {-webkit-transform: rotateY(144deg) translateZ(250px);}
#shape .p6 {-webkit-transform: rotateY(180deg) translateZ(250px);}
#shape .p7 {-webkit-transform: rotateY(216deg) translateZ(250px);}
#shape .p8 {-webkit-transform: rotateY(252deg) translateZ(250px);}
#shape .p9 {-webkit-transform: rotateY(288deg) translateZ(250px);}
#shape .p10 {-webkit-transform: rotateY(324deg) translateZ(250px);}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment