From Intro to CSS 3D Transforms
A Pen by Mathieu Habegger on CodePen.
<div class="scene"> | |
<div class="cube"> | |
<div class="cube__face cube__face--front"></div> | |
<div class="cube__face cube__face--back"></div> | |
<div class="cube__face cube__face--right"></div> | |
<div class="cube__face cube__face--left"></div> | |
<div class="cube__face cube__face--top"></div> | |
<div class="cube__face cube__face--bottom"></div> | |
<div class="cube__inline cube__inline--1"></div> | |
<div class="cube__inline cube__inline--2"></div> | |
<div class="cube__inline cube__inline--3"></div> | |
<div class="cube__inline cube__inline--4"></div> | |
<div class="cube__inline cube__inline--5"></div> | |
<div class="cube__inline cube__inline--6"></div> | |
</div> | |
</div> | |
<p class="radio-group"> | |
<label> | |
<input type="radio" name="rotate-cube-side" value="front" checked />front | |
</label> | |
<label> | |
<input type="radio" name="rotate-cube-side" value="right" /> right | |
</label> | |
<label> | |
<input type="radio" name="rotate-cube-side" value="back" /> back | |
</label> | |
<label> | |
<input type="radio" name="rotate-cube-side" value="left" /> left | |
</label> | |
<label> | |
<input type="radio" name="rotate-cube-side" value="top" /> top | |
</label> | |
<label> | |
<input type="radio" name="rotate-cube-side" value="bottom" /> bottom | |
</label> | |
</p> |
From Intro to CSS 3D Transforms
A Pen by Mathieu Habegger on CodePen.
var cube = document.querySelector('.cube'); | |
var radioGroup = document.querySelector('.radio-group'); | |
var currentClass = ''; | |
function changeSide() { | |
var checkedRadio = radioGroup.querySelector(':checked'); | |
var showClass = 'show-' + checkedRadio.value; | |
if ( currentClass ) { | |
cube.classList.remove( currentClass ); | |
} | |
cube.classList.add( showClass ); | |
currentClass = showClass; | |
} | |
// set initial side | |
changeSide(); | |
radioGroup.addEventListener( 'change', changeSide ); |
* { box-sizing: border-box; } | |
body { font-family: sans-serif; } | |
.scene { | |
width: 200px; | |
height: 200px; | |
border: 1px solid #CCC; | |
margin: 80px; | |
/* perspective: 400px; */ | |
perspective: 0px; | |
} | |
.cube { | |
width: 200px; | |
height: 200px; | |
position: relative; | |
transform-style: preserve-3d; | |
transform: translateZ(-100px); | |
transition: transform 1s; | |
} | |
.cube.show-front { | |
transform: translateZ(-100px) rotateX( 35.264deg) rotateY( 45deg); } | |
.cube.show-right { transform: rotateX( 0deg) rotateY(54.5deg) rotateZ(-45deg);} | |
.cube.show-back { transform: rotateX( 54.5deg) rotateY(0deg) rotateZ(-45deg); } | |
.cube.show-left { transform: rotateX( 54.5deg) rotateY(0deg) rotateZ(45deg); } | |
.cube.show-top { transform: rotateX( 54.5deg) rotateY(0deg) rotateZ(225deg); } | |
.cube.show-bottom { transform: rotateX( 0deg) rotateY(54.5deg) rotateZ(225deg); } | |
.cube__face { | |
position: absolute; | |
width: 200px; | |
height: 200px; | |
border: 10px solid black; | |
line-height: 200px; | |
font-size: 40px; | |
font-weight: bold; | |
color: white; | |
text-align: center; | |
padding: 0; | |
} | |
.cube__inline { | |
position: absolute; | |
width: 200px; | |
height: 280px; | |
top: -40px; | |
border: 10px solid black; | |
line-height: 200px; | |
font-size: 40px; | |
font-weight: bold; | |
color: white; | |
text-align: center; | |
padding: 0; | |
} | |
.cube__inline--1 { transform: rotateX( 45deg) } | |
.cube__inline--2 { transform: rotateX( -45deg) } | |
.cube__inline--3 { transform: rotateZ( -45deg) rotateY( 90deg) } | |
.cube__inline--4 { transform: rotateZ( 45deg) rotateY( 90deg) } | |
.cube__inline--5 { transform: rotateZ( 90deg) rotateX( 45deg) } | |
.cube__inline--6 { transform: rotateZ( 90deg) rotateX( -45deg) } | |
.cube__face--frontdd { background: hsla( 0, 100%, 50%, 0.7); } | |
.cube__face--rightdd { background: hsla( 60, 100%, 50%, 0.7); } | |
.cube__face--backdd { background: hsla(120, 100%, 50%, 0.7); } | |
.cube__face--leftdd { background: hsla(180, 100%, 50%, 0.7); } | |
.cube__face--topdd { background: hsla(240, 100%, 50%, 0.7); } | |
.cube__face--bottomdd { background: hsla(300, 100%, 50%, 0.7); } | |
.cube__face--front { transform: rotateY( 0deg) translateZ(100px); } | |
.cube__face--right { transform: rotateY( 90deg) translateZ(100px); } | |
.cube__face--back { transform: rotateY(180deg) translateZ(100px); } | |
.cube__face--left { transform: rotateY(-90deg) translateZ(100px); } | |
.cube__face--top { transform: rotateX( 90deg) translateZ(100px); } | |
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); } | |
label { margin-right: 10px; } |