Confessions and Confusions of Ashok M A. Personal and Professional Blog.

Ashok Mannolu Arunachalam, New to meCSSHTML

CSS transform property

I am busy with my work lately. So, I could not able to post regularly >_< Anyways, here goes!

CSS transform property is amazing and it helps creating our own kind-of animations. I have recently came across a code snippet and wanted to share it with you guys.

The html goes like this.

<title>CSS Transform</title>
<link rel="stylesheet"
href="./static/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="styles.css" />
<div class="scene">
<div class="box">
<div class="front face">
<i class="fas fa-home"></i>
<div class="right face">
<a href="">HOME</a>

and the css goes like this.

.scene {
width: 90px;
height: 100px;
margin: 0 auto;
.box {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s ease-out;
transform-origin: 0 0;
.scene:hover .box {
transform: rotateY(-90deg);
cursor: pointer;
.face {
position: absolute;
width: 100%;
height: 100%;
font-size: 80px;
color: white;
transform-origin: 0 0;
.front {
transform: rotateY(0deg);
background-color: #393e46;
.right {
transform: rotateY(90deg);
left: 80px;
background-color: #fcda05;
color: #393e46;
font-size: 30px;

I have tried the piece of code and it works great! ^_^

Live Demo CSS Transform 3D in action

I am exploring the css by myself. It is amazing that we can do a lot of dynamic stuffs with it. As mentioned, code snippets are from online or people I follow in social networks. \O/