button 3d transform

by Pranab Dey

HTML

<div class="main">
	<div class="bow">
		<div class="back" id="back">Back</div>
		<div class="front" id="front">Front</div>
	</div>
</div>

CSS

.main{
	width: 200px; height: 60px;perspective: 1000px;position: absolute; top: 50%; left: 50%;
	transform: translate(-50%,-50%);
}
.bow{
	width: 100%; height: 100%; transform-style: preserve-3d; transition: 0.5s ease;
}
.front,.back{
	width: 100%;
  height: 100%; background: red;
  position: absolute;
  box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 50px;
  font-size: 17pt;
  text-align: center;
  text-transform: uppercase;
}
.front{
	transform: rotateX(-90deg) translate3d(0, 0, 30px); background: green;
}
.main:hover .bow{
	transform: rotateX(90deg) translate3d(0, 0, 0px);
}

JavaScript

/*var front = document.getElementById("front"),
		back = document.getElementById("back");
front.addEventListener("mouseover", function(){
	front.classList.add("hover"); back.classList.add("una");
})
front.addEventListener("mouseout", function(){
	front.classList.remove("hover"); back.classList.remove("una");
})*/