css transition and transform

In this example below you will see how to do a css transition and transform with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dfcarpenter, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dfcarpenter ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>css transition and transform</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="div2"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dfcarpenter/css-transition-and-transform-AajCe */
.div2 {
  width: 100px;
  height: 75px;
  transition: 1s;
  background-color: lime;
  -webkit-transform: perspective(350px) rotateZ(0deg) translateX(30px) translateY(-35px) translateZ(150px);
}

.div2:hover {
  -webkit-transform: perspective(200px) rotateZ(45deg) translateX(30px) translateY(-35px) translateZ(150px);
}

Comments