Created
September 13, 2013 09:46
-
-
Save anonymous/6548623 to your computer and use it in GitHub Desktop.
Pure CSS Real Spinning Square Antiprism
This file contains hidden or 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
| /** | |
| * 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); | |
| } |
This file contains hidden or 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
| <!-- content to be placed inside <body>…</body> --> | |
| <ul class='polyhedron square-antiprism'> | |
| <li class='side square'><img src='http://th03.deviantart.net/fs70/PRE/i/2011/362/5/c/polygon_swag_2_by_leeolson-d4kkdk0.png'> | |
| <li class='side square'><img src='http://th03.deviantart.net/fs70/PRE/i/2011/362/5/c/polygon_swag_2_by_leeolson-d4kkdk0.png'> | |
| <li class='side triangle'><img src='http://www.colorhexa.com/ff0066.png'> | |
| <li class='side triangle'><img src='http://www.colorhexa.com/ffffcb.png'> | |
| <li class='side triangle'><img src='http://www.colorhexa.com/ff339a.png'> | |
| <li class='side triangle'><img src='http://www.colorhexa.com/333333.png'> | |
| <li class='side triangle'><img src='http://www.colorhexa.com/ffffcb.png'> | |
| <li class='side triangle'><img src='http://www.colorhexa.com/ff339a.png'> | |
| <li class='side triangle'><img src='http://www.colorhexa.com/ffffcb.png'> | |
| <li class='side triangle'><img src='http://www.colorhexa.com/ff0066.png'> | |
| </ul> |
This file contains hidden or 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
| // alert('Hello world!'); |
This file contains hidden or 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
| {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment