Skip to content

Instantly share code, notes, and snippets.

@flobraeuer

flobraeuer/dabblet.css

Created August 9, 2013 21:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flobraeuer/6197252 to your computer and use it in GitHub Desktop.
Save flobraeuer/6197252 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Real Spinning Square Antiprism
Raw
dabblet.css
/**
* Pure CSS Real Spinning Square Antiprism
* http://en.wikipedia.org/wiki/Square_antiprism
* get triangular faces using this method http://dabblet.com/gist/3805071
*
* Related
* -------
* Pure CSS Real Spinning Truncated Cube http://dabblet.com/gist/4543683
* Pure CSS Real Spinning Octahedron http://dabblet.com/gist/4540517
* Pure CSS Real Spinning Cuboctahedron http://dabblet.com/gist/4548435
* Pure CSS Real Spinning Rhombic Dodecahedron http://dabblet.com/gist/4550540
* Pure CSS Real Spinning Rhombicuboctahedron http://dabblet.com/gist/4552374
*
* SUPPORT
* =======
* Tested & works in latest Chrome and Safari on Windows 7
*
* Also works in Firefox, but the animation is jiggly
* - is that just my old laptop? if not, any ideas about how to fix it?
*
* IE10 does not support transform-style => cannot have a real-looking 3D figure
*
* Opera does not support 3D transforms
*/
body { overflow: hidden; /* prevent scrollbars in rotation */ background: #ccc; }
.polyhedron {
position: relative;
margin: 30% auto;
padding: 0;
width: 16em; height: 16em;
list-style: none;
perspective: 160em;
/* just for testing purposes *
transform: rotateZ(-15deg) rotateX(-15deg) rotateY(-15deg); /**/
transform-style: preserve-3d;
/* turn on and off for testing purposes */
animation: rot 20s infinite linear;/**/
}
@keyframes rot {
from { transform: rotateZ(-60deg) rotateX(45deg) rotateY(-30deg); }
to { transform: rotateZ(300deg) rotateX(-315deg) rotateY(330deg); }
}
.side, .side img { width: 100%; height: 100%; }
.side {
overflow: hidden;
position: absolute;
width: 100%; height: 100%;
/* turn on and off for testing purposes */
backface-visibility: hidden;/**/
}
.triangle { pointer-events: none; }
.side img { opacity: .75; pointer-events: auto; cursor: pointer; }
.side img:hover { opacity: 1; }
.triangle img {
transform: scaleX(1.155) skewY(-30deg) rotateZ(-30deg) translateY(-50%);
}
/* distance between squares is:
h = sqrt( (a*sqrt(3)/2)^2 - (a*sqrt(2)/2 - a/2)^2 ) =
= sqrt( 3(a^2)/4 - ((a^2)/4)*(2 - 2*sqrt(2) + 1) ) =
= sqrt( 3(a^2)/4 - 3(a^2)/4 + (a^2)*2*sqrt(2)/4 ) =
= (a/2)*sqrt(2*sqrt(2)) = .84*a => if a = 16em, then h = 13.45em
*/
.square:nth-child(1) {
transform: rotateX(90deg) translateZ(6.73em); /* translate by h/2 */
}
.square:nth-child(2) {
transform: rotateX(-90deg) rotateZ(45deg) translateZ(6.73em);
}
.triangle:nth-child(3) {
transform: rotateY(45deg) rotateX(-13.836deg) translateZ(9.33em)
translateY(29%) rotateZ(30deg) skewY(30deg) scaleX(.866);
}
.triangle:nth-child(4) {
transform: rotateY(135deg) rotateX(-13.836deg) translateZ(9.33em)
translateY(29%) rotateZ(30deg) skewY(30deg) scaleX(.866);
}
.triangle:nth-child(5) {
transform: rotateY(-135deg) rotateX(-13.836deg) translateZ(9.33em)
translateY(29%) rotateZ(30deg) skewY(30deg) scaleX(.866);
}
.triangle:nth-child(6) {
transform: rotateY(-45deg) rotateX(-13.836deg) translateZ(9.33em)
translateY(29%) rotateZ(30deg) skewY(30deg) scaleX(.866);
}
.triangle:nth-child(7) {
transform: rotateZ(180deg) rotateX(-13.836deg) translateZ(9.33em)
translateY(29%) rotateZ(30deg) skewY(30deg) scaleX(.866);
}
.triangle:nth-child(8) {
transform: rotateZ(180deg)
rotateY(90deg) rotateX(-13.836deg) translateZ(9.33em)
translateY(29%) rotateZ(30deg) skewY(30deg) scaleX(.866);
}
.triangle:nth-child(9) {
transform: rotateZ(180deg)
rotateY(180deg) rotateX(-13.836deg) translateZ(9.33em)
translateY(29%) rotateZ(30deg) skewY(30deg) scaleX(.866);
}
.triangle:nth-child(10) {
transform: rotateZ(180deg)
rotateY(-90deg) rotateX(-13.836deg) translateZ(9.33em)
translateY(29%) rotateZ(30deg) skewY(30deg) scaleX(.866);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul class='polyhedron square-antiprism'>
<li class='side square'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2009-10-a-web.jpg'>
<li class='side square'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2009-25-aw-web.jpg'>
<li class='side triangle'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-24-a-web.jpg'>
<li class='side triangle'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2001-16-r-web.jpg'>
<li class='side triangle'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2008-16-ca-web.jpg'>
<li class='side triangle'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2000-19-b-web.jpg'>
<li class='side triangle'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2001-37-a-web.jpg'>
<li class='side triangle'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2009-18-a-web.jpg'>
<li class='side triangle'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-38-c-web.jpg'>
<li class='side triangle'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2008-03-c-web.jpg'>
</ul>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment