JSFiddle - React, Tailwind, and code Playground
HTML
<div class="myDiv">
Special animation effect for image gallary. Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem Ipsum
</div>
<div class="myDiv">
Special animation effect for image gallary. Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem Ipsum
</div><div class="myDiv">
Special animation effect for image gallary. Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem Ipsum
</div><div class="myDiv">
Special animation effect for image gallary. Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem Ipsum
</div><div class="myDiv">
Special animation effect for image gallary. Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem Ipsum
</div><div class="myDiv">
Special animation effect for image gallary. Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem Ipsum
</div><div class="myDiv">
Special animation effect for image gallary. Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem Ipsum
</div><div class="myDiv">
Special animation effect for image gallary. Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
Lorem Ipsum
</div>
CSS
@keyframes rotation{
from{
transform: rotatex(26deg) rotateZ(-20deg) rotateY(45deg) scale(0.25,0.25) skew(45deg, 90deg) rotate3d(90,90,90,-90deg);
-ms-transform: rotatex(26deg) rotateZ(-20deg) rotateY(45deg) scale(0.25,0.25) skew(45deg, 90deg) rotate3d(90,90,90,-90deg); /* IE 9 */
-webkit-transform: rotatex(26deg) rotateZ(-20deg) rotateY(45deg) scale(0.25,0.25) skew(45deg, 90deg) rotate3d(90,90,90,-90deg); /* Chrome, Safari, Opera */
}
to{
transform: rotatex(0deg) rotateZ(0deg) rotateY(0deg) skew(0deg, 0deg);
-ms-transform: rotatex(0deg) rotateZ(0deg) rotateY(0deg) skew(0deg, 0deg);/* IE 9 */
-webkit-transform: rotatex(0deg) rotateZ(0deg) rotateY(0deg) skew(0deg, 0deg); /* Chrome, Safari, Opera */
}
}
.myDiv {
display:block;
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-webkit-transform: rotateZ(0deg) rotateY(150deg); /* Safari */
transform: rotateZ(0deg) rotateY(0deg) rotateZ(0deg) scale(1,1); /* Standard syntax */
-ms-transform: rotateZ(0deg) rotateY(0deg) rotateZ(0deg) scale(1,1); /* IE 9 */
transition: rotateY 2s ease-in,rotateZ 2s ease-in;
-webkit-transition: rotateY 2s ease-in,rotateZ 2s ease-in;
-moz-transition: rotateY 2s ease-in,rotateZ 2s ease-in;
-webkit-animation-name:rotation;
animation-name:rotation;
animation-duration:1s;
-webkit-animation-duration:1s;
}
.myDiv:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);/* Standard syntax */
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05); /* Chrome, Safari, Opera */
}