Animation How to - Create Skew animation

Question

We would like to know how to create Skew animation.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.logo {<!--   www  .  j  a  va 2s  .c  o m-->
  position: relative;
  width: 200px;
  height: 90px;
  margin: 40px auto;
}

.color-1, .color-2, .text {
  width: 200px;
  height: 90px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}

.color-1 {
  background: orange;
  animation: my-reverse-skew 2s infinite ease;
}

.color-2 {
  background: red;
  animation: my-skew 2s infinite ease;
}

.text {
  color: white;
  padding-top: 25px;
  font-size: 40px;
  opacity: 0.8;
  z-index: 300;
}

@keyframes my-skew { 
  0% {
  transform: matrix(1, -0.4, 0, 1.02, 0, 0);
  z-index: 100;
  }
  50%{
    transform:matrix(1,0.4,0,1.02,0,0);
    z-index:200;
  }
  100%{
    transform: matrix(1,-0.4,0,1.02,0,0);
    z-index:100;   
  }
}
@keyframes my-reverse-skew { 
  0% {
  transform: matrix(1, 0.4, 0, 1.02, 0, 0);
  z-index: 200;
  }
  50%{
    transform:matrix(1,-0.4,0,1.02,0,0);
    z-index:100;    
  }
  100%{
    transform:matrix(1,0.4,0,1.02,0,0);
    z-index:200;   
  }
}
</style>
</head>
<body>
  <div class="logo">
    <div class="color-1"></div>
    <div class="color-2"></div>
    <div class="text">java2s.com</div>
  </div>
</body>
</html>

The code above is rendered as follows: