CSS Challenge Day 048

css-challenge-day-048.markdown

CSS Challenge Day 048

Here is my CSS Challenge for Day 48. Playing with transform attributes. Rotations. Cube animation.

A Pen by Paul on CodePen.

License.

index.html

<div class="frame">
  <div class="center">
		<div class="cube">
			<div class="side top"></div>
			<div class="side bottom"></div>
			<div class="side front"></div>
			<div class="side back"></div>
			<div class="side left"></div>
			<div class="side right"></div>
		</div>
  </div>
</div>

script.js

// jQuery v3.3.1 is supported

scripts

<script src="https://100dayscss.com/codepen/js/jquery.min.js"></script>

style.scss

// delete the following line if no text is used
// edit the line if you wanna use other fonts
// @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
	box-sizing: border-box;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #455A64;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	perspective: 600px;
}

.cube {
	position: relative;
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	transform: translateZ(-200px) rotateX(60deg) rotateZ(45deg);
	transition: all 2s ease-in-out;
	
	&:hover {
		transform: translateZ(-200px) rotateX(-120deg) rotateZ(135deg);
	}
	
	.side {
		position: absolute;
		width: 200px;
		height: 200px;
	}
	
	.front {
		background-color: #FFAB00;
		transform: rotateY(0deg) translateZ(100px);
		transition: all 2s ease-in-out;
	}
	
	&:hover > .front {
		transform: translateZ(150px);
		opacity: 0.7;
	}
	
	.back {
		background-color: #FFD600;
		transform: rotateX(180deg) translateZ(100px);
		transition: all 2s ease-in-out;
	}
	
	&:hover > .back {
		transform: rotateX(180deg) translateZ(150px);
		opacity: 0.7;
	}
	
	.right {
		background-color: #AEEA00;
		transform: rotateY(90deg) translateZ(100px);
		transition: all 2s ease-in-out;
	}
	
	&:hover > .right {
		transform: rotateY(90deg) translateZ(150px);
		opacity: 0.7;
	}
	
	.left {
		background-color: #64DD17;
		transform: rotateY(-90deg) translateZ(100px);
		transition: all 2s ease-in-out;
	}
	
	&:hover > .left {
		transform: rotateY(-90deg) translateZ(150px);
		opacity: 0.7;
	}
	
	.top {
		background-color: #00BFA5;
		transform: rotateX(90deg) translateZ(100px);
		transition: all 2s ease-in-out;
	}
	
	&:hover > .top {
		transform: rotateX(90deg) translateZ(150px);
		opacity: 0.7;
	}
	
	.bottom {
		background-color: #00E5FF;
		transform: rotateX(-90deg) translateZ(100px);
		transition: all 2s ease-in-out;
	}
	
	&:hover > .bottom {
		transform: rotateX(-90deg) translateZ(150px);
		opacity: 0.7;
	}
}