Try It Yourself: CSS Transitions And Transforms

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Transitions and Transforms</title>
  <meta charset="UTF-8">
</head>
<body>

<h1>CSS Transitions and Transforms</h1>

<h2>CSS Translate 2D</h2>

<div class="translate"></div> 

<style>
.translate{
  height: 100px;
  width: 100px;
  background: #151f28;
  transition: 0.5s;
} 
.translate:hover{
  transform: translate(30px,10px);
} 
</style>

<h2>CSS Rotate 2D</h2>

<div class="rotate2d"></div>

<style>
.rotate2d{
  width: 100px;
  height: 100px;
  background: #151f28;
  transition: 2s;
}
.rotate2d:hover{
  transform: rotate(360deg);
}
</style>

<h2>CSS Scale</h2>

<div class="scale"></div>

<style>
.scale{
  width: 100px;
  height: 100px;
  background: #151f28;
  transition: 2s;
}
.scale:hover{
  transform: scale(1.5);
}
</style>

<h2>CSS Skew</h2>

<div class="skew"></div>

<style>
.skew{
  width: 100px;
  height: 100px;
  background: #151f28;
  transition: 2s;
}
.skew:hover{
  transform: skew(-45deg, 30deg);
}
</style>

<h2>CSS RotateX() 3D</h2>

<div class="rotatex"></div>

<style>
.rotatex{
  height: 100px;
  width: 100px;
  background: #151f28;
  transition: 1s;
}
.rotatex:hover{
  transform: rotateX(150deg);
}
</style>

<h2>CSS RotateY() 3D</h2>

<div class="rotatey"></div>

<style>
.rotatey{
  height: 100px;
  width: 100px;
  background: #151f28;
  transition: 1s;
}
.rotatey:hover{
  transform: rotateY(150deg);
}
</style>

<h2>CSS RotateZ() 3D</h2>

<div class="rotatez"></div>

<style>
.rotatez{
  height: 100px;
  width: 100px;
  background: #151f28;
  transition: 1s;
}
.rotatez:hover{
  transform: rotateZ(-180deg);
}
</style>

<h2>CSS Translate 3D</h2>

<div class="box">
    <div class="side top">1</div>
    <div class="side left">2</div>
    <div class="side right">3</div>
</div>

<style>
.box{
  width: 100px;
  height: 100px;
  position: relative;
  margin: 50px;
  transform: perspective(2000px) rotateX(-50deg) rotateY(60deg);
  transform-style: preserve-3d;
  transition: 0.5s;
}
.side{
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top{
  background: red;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.left{
  background: green;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.right{
  background: blue;
  transform: translate3d(0, 0, 50px);
}
.box:hover{
  transform: perspective(2000px) rotateX(-15deg) rotateY(30deg);
}
</style>

</body>
</html>

CSS Code

/* Write your CSS here */

CSS Transitions And Transforms - Playground