AshKeys

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

Ashok Mannolu Arunachalam, New to meCSSHTML
Back

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.

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

and the css goes like this.

css
.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/