Created
October 27, 2018 07:33
-
-
Save chemory/5d3d11d9917677a86a60618a3a10c855 to your computer and use it in GitHub Desktop.
Pure CSS Real Spinning Octahedron (Triangular Antiprism)
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
| /** | |
| * Pure CSS Real Spinning Octahedron (Triangular Antiprism) | |
| * http://mathworld.wolfram.com/Octahedron.html | |
| * http://en.wikipedia.org/wiki/Octahedron | |
| * http://www.mathsisfun.com/geometry/octahedron.html | |
| * 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 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 | |
| * Pure CSS Real Spinning Square Antiprism http://dabblet.com/gist/4556863 | |
| */ | |
| body { overflow: hidden; } | |
| .polyhedron { | |
| position: relative; | |
| margin: 20% auto; | |
| padding: 0; | |
| width: 16em; height: 16em; | |
| list-style: none; | |
| perspective: 100em; | |
| transform-style: preserve-3d; | |
| animation: rot 20s infinite linear; | |
| cursor: pointer; | |
| } | |
| @keyframes rot { | |
| from { transform: rotateZ(-15deg) rotateX(45deg) rotateY(0deg); } | |
| to { transform: rotateZ(345deg) rotateX(-315deg) rotateY(360deg); } | |
| } | |
| .side, .side a, .side img { display: block; width: 100%; height: 100%; } | |
| .side { | |
| position: absolute; | |
| backface-visibility: hidden; | |
| pointer-events: none; | |
| } | |
| .side img { opacity: .75; pointer-events: auto; cursor: pointer; } | |
| .side img:hover { opacity: 1; } | |
| .side:nth-child(1) { | |
| transform: rotateX(35.26deg) translateZ(4.1em); | |
| } | |
| .side:nth-child(2) { | |
| transform: rotateY(90deg) rotateX(35.26deg) translateZ(4.1em); | |
| } | |
| .side:nth-child(3) { | |
| transform: rotateY(180deg) rotateX(35.26deg) translateZ(4.1em); | |
| } | |
| .side:nth-child(4) { | |
| transform: rotateY(-90deg) rotateX(35.26deg) translateZ(4.1em); | |
| } | |
| .side:nth-child(5) { | |
| transform: translateY(52%) rotateX(-35.26deg) translateZ(4.1em); | |
| } | |
| .side:nth-child(6) { | |
| transform: translateY(52%) rotateY(90deg) rotateX(-35.26deg) translateZ(4.1em); | |
| } | |
| .side:nth-child(7) { | |
| transform: translateY(52%) rotateY(180deg) rotateX(-35.26deg) translateZ(4.1em); | |
| } | |
| .side:nth-child(8) { | |
| transform: translateY(52%) rotateY(-90deg) rotateX(-35.26deg) translateZ(4.1em); | |
| } | |
| .side a { | |
| overflow: hidden; | |
| transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866); | |
| } | |
| .side img { | |
| transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%); | |
| } | |
| .side:nth-child(n+5) a { | |
| transform: translateY(-50%) rotate(30deg) skewY(30deg) scaleX(.866); | |
| } | |
| .side:nth-child(n+5) img { | |
| transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(50%); | |
| } |
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
| <!-- content to be placed inside <body>…</body> --> | |
| <ul class='polyhedron'> | |
| <li class='side'><a href='#'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-web.jpg'></a></li> | |
| <li class='side'><a href='#'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-web.jpg'></a></li> | |
| <li class='side'><a href='#'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-49-a-web.jpg'></a></li> | |
| <li class='side'><a href='#'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-22-a-web.jpg'></a></li> | |
| <li class='side'><a href='#'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-web.jpg'></a></li> | |
| <li class='side'><a href='#'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-45-a-web.jpg'></a></li> | |
| <li class='side'><a href='#'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-web.jpg'></a></li> | |
| <li class='side'><a href='#'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-10-i-web.jpg'></a></li> | |
| </ul> |
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
| // alert('Hello world!'); |
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
| {"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