16,277
edits
Changes
Jump to navigation
Jump to search
made the cube bigger
Line 1:
Line 1:
{{#css:
{{#css:
.scene {
.scene {
−width: 200px;
+width: 400px;
−height: 200px;
+height: 400px;
perspective: 600px;
perspective: 600px;
margin: 100px;
margin: 100px;
Line 17:
Line 17:
.cube-face {
.cube-face {
position: absolute;
position: absolute;
−width: 200px;
+width: 400px;
−height: 200px;
+height: 400px;
}
}
−.face-front { transform: rotateY( 0deg) translateZ(100px); background-color: rgba(255, 0, 0, 0.5); }
+.face-front { transform: rotateY( 0deg) translateZ(200px); background-color: rgba(255, 0, 0, 0.5); }
−.face-right { transform: rotateY( 90deg) translateZ(100px); background-color: rgba(255, 255, 0, 0.5); }
+.face-right { transform: rotateY( 90deg) translateZ(200px); background-color: rgba(255, 255, 0, 0.5); }
−.face-back { transform: rotateY(180deg) translateZ(100px); background-color: rgba(0, 255, 0, 0.5); }
+.face-back { transform: rotateY(180deg) translateZ(200px); background-color: rgba(0, 255, 0, 0.5); }
−.face-left { transform: rotateY(-90deg) translateZ(100px); background-color: rgba(0, 255, 255, 0.5); }
+.face-left { transform: rotateY(-90deg) translateZ(200px); background-color: rgba(0, 255, 255, 0.5); }
−.face-top { transform: rotateX( 90deg) translateZ(100px); background-color: rgba(0, 0, 255, 0.5); }
+.face-top { transform: rotateX( 90deg) translateZ(200px); background-color: rgba(0, 0, 255, 0.5); }
−.face-bottom { transform: rotateX(-90deg) translateZ(100px); background-color: rgba(255, 0, 255, 0.5); }
+.face-bottom { transform: rotateX(-90deg) translateZ(200px); background-color: rgba(255, 0, 255, 0.5); }
@keyframes rotatey {
@keyframes rotatey {
0% { transform: rotate3d(0, 0, 1, 0deg); }
0% { transform: rotate3d(0, 0, 1, 0deg); }