AshKey's Logo
ServicesAbout Us

AshKeys

Confessions and Confusions of a Freelance Fullstacker.

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/