Translate CSS property

Translate CSS property

by soum1

HTML

<div class="mainWrapper" style="margin:60px 50px">
  <div class="InnerWrapper">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
</div>

CSS

body{
  background: #8df8de;
}
.InnerWrapper p{
  background: rgba(182, 242, 235, 0.5);
  padding: 20px 30px;
  border: 2px solid #fff;
  transition: 2s;
  max-width: 300px;
}
.InnerWrapper p:first-child:hover{
  transform: rotate(20deg);
}
.InnerWrapper p:nth-child(3):hover{
  transform: skew(20deg) translate3d(40px, -60px, 10px);
}
.InnerWrapper p:nth-child(2):hover{
  transform: scale(1.2) translate3d(20px, -30px, 10px);
  transform-origin: center;
}
.InnerWrapper p:first-child{
  transform: translate3d(0px, 20px, 1px);
}
.InnerWrapper p:nth-child(2){
  transform: translate3d(20px, -30px, 10px);
}
.InnerWrapper p:nth-child(3){
  transform: translate3d(40px, -60px, 10px);
  
}
.InnerWrapper {
    max-width: 375px;
    display: inline-block;
}