<div class="container">
<h4>matrix(<span>.5</span>, 0, 0, 1, 0, 0)</h4>
<div class="transformed t-width" data-content="Width"></div>
</div>
<div class="container">
<h4>matrix(1, 0, 0, <span>.5</span>, 0, 0)</h4>
<div class="transformed t-height" data-content="Height"></div>
</div>
<div class="container">
<h4>matrix(1, <span>.5</span>, 0, 1, 0, 0)</h4>
<div class="transformed t-skewY" data-content="Skew Y"></div>
</div>
<div class="container">
<h4>matrix(1, 0, <span>.5</span>, 1, 0, 0)</h4>
<div class="transformed t-skewX" data-content="Skew X"></div>
</div>
<div class="container">
<h4>matrix(1, 0, 0, 1, <span>15</span>, 0)</h4>
<div class="transformed t-x" data-content="Translate X"></div>
</div>
<div class="container">
<h4>matrix(1, 0, 0, 1, 0, <span>15</span>)</h4>
<div class="transformed t-y" data-content="Translate Y"></div>
</div>
BODY {
padding-top: 20px;
text-align: center;
}
DIV {
height: 150px;
width: 200px;
}
.container {
position: relative;
display: inline-block;
height: 180px;
margin: 0 1em 1em;
}
.transformed {
position: absolute;
bottom: 0;
background: yellowgreen;
border-radius: 5px;
opacity: .7;
animation: notransform 5s infinite;
}
H4,
.transformed:before {
content: attr(data-content);
display: block;
margin: 0;
padding: 7px 0;
text-align: center;
font-weight: normal;
}
.transformed:before {
background: rgba(255,255,255,.7);
}
H4 SPAN {
font-weight: bold;
color: crimson;
}
.transformed:before {
padding: 5px;
}
.t-width {
transform: matrix(.5, 0, 0, 1, 0, 0);
}
.t-height {
transform: matrix(1, 0, 0, .5, 0, 0);
animation-delay: .5s;
}
.t-skewY {
transform: matrix(1, .5, 0, 1, 0, 0);
animation-delay: 1s;
}
.t-skewX {
transform: matrix(1, 0, .5, 1, 0, 0);
animation-delay: 1.5s;
}
.t-x {
transform: matrix(1, 0, 0, 1, 15, 0);
animation-delay: 2s;
}
.t-y {
transform: matrix(1, 0, 0, 1, 0, 15);
animation-delay: 2.5s;
}
@keyframes notransform {
50%{
transform: none;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.