diff options
Diffstat (limited to 'style.css')
-rw-r--r-- | style.css | 119 |
1 files changed, 118 insertions, 1 deletions
@@ -8,6 +8,123 @@ body { img { max-width: 100%; height: auto; - width: auto\9; + width: auto; margin: 8px 0px; } + +/* https://3dtransforms.desandro.com */ +.scene--cube { + width: 300px; + height: 300px; + margin: 80px 0; + perspective: 500px; +} + +.scene--persp-cube { + perspective: 400px; +} + +.cube { + width: 300px; + height: 300px; + position: relative; + transform-style: preserve-3d; + transform: translateZ(-150px); +} + +.scene--hero { + height: 300px; + margin: 80px 0; + perspective: 500px; + border: none; +} + +.cube--hero { + margin: 0 auto; +} + +.cube.is-spinning { + animation: spinCube 7s infinite linear; +} + +@keyframes spinCube { + 0% { + transform: translateZ(-150px) rotateX(0deg) rotateY(0deg); + } + 100% { + transform: translateZ(-150px) rotateX(360deg) rotateY(360deg); + } +} + +.cube__face { + position: absolute; + width: 300px; + height: 300px; + border: 2px solid grey; + line-height: 300px; + font-size: 40px; + font-weight: bold; + color: white; + text-align: center; +} + +.cube.is-backface-hidden .cube__face { + backface-visibility: hidden; +} + +.cube__face--front { + background: hsla(0, 100%, 50%, 0.7); +} +.cube__face--right { + background: hsla(60, 100%, 50%, 0.7); +} +.cube__face--back { + background: hsla(120, 100%, 50%, 0.7); +} +.cube__face--left { + background: hsla(180, 100%, 50%, 0.7); +} +.cube__face--top { + background: hsla(240, 100%, 50%, 0.7); +} +.cube__face--bottom { + background: hsla(300, 100%, 50%, 0.7); +} + +.cube__face--front { + transform: rotateY(0deg) translateZ(150px); +} +.cube__face--right { + transform: rotateY(90deg) translateZ(150px); +} +.cube__face--back { + transform: rotateY(180deg) translateZ(150px); +} +.cube__face--left { + transform: rotateY(-90deg) translateZ(150px); +} +.cube__face--top { + transform: rotateX(90deg) translateZ(150px); +} +.cube__face--bottom { + transform: rotateX(-90deg) translateZ(150px); +} + +.cube.show-front { + transform: translateZ(-150px) rotateY(0deg); +} +.cube.show-right { + transform: translateZ(-150px) rotateY(-90deg); +} +.cube.show-back { + transform: translateZ(-150px) rotateY(-180deg); +} +.cube.show-left { + transform: translateZ(-150px) rotateY(90deg); +} +.cube.show-top { + transform: translateZ(-150px) rotateX(-90deg); +} +.cube.show-bottom { + transform: translateZ(-150px) rotateX(90deg); +} |