Verzerren mit positiven Werten
.box {
width: 100px;
height: 100px;
background: #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 10px #111;
-moz-box-shadow: 0 0 10px #111;
box-shadow: 0 0 10px #111;
margin: 20px auto;
}
.box:hover {
-webkit-transform: skew(15deg,4deg);
-moz-transform: skew(15deg,4deg);
-o-transform: skew(15deg,4deg);
-ms-transform: skew(15deg,4deg);
transform: skew(15deg,4deg);
}
Verzerren mit negativen Werten
.box:hover {
-webkit-transform: skew(-15deg,-4deg);
-moz-transform: skew(-15deg,-4deg);
-o-transform: skew(-15deg,-4deg);
-ms-transform: skew(-15deg,-4deg);
transform: skew(-15deg,-4deg);
}
Verzerren der X-Achse
.box:hover {
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
transform: skewX(15deg);
}
Verzerren der Y-Achse
.box:hover {
-webkit-transform: skewY(-15deg);
-moz-transform: skewY(-15deg);
-o-transform: skewY(-15deg);
-ms-transform: skewY(-15deg);
transform: skewY(-15deg);
}
Verzerrtes Bild
.img:hover {
-webkit-transform: skew(15deg,15deg);
-moz-transform: skew(15deg,15deg);
-o-transform: skew(15deg,15deg);
-ms-transform: skew(15deg,15deg);
transform: skew(15deg,15deg);
}
Text verzerren
olivergast.de
.img:hover {
-webkit-transform: skew(15deg,15deg);
-moz-transform: skew(15deg,15deg);
-o-transform: skew(15deg,15deg);
-ms-transform: skew(15deg,15deg);
transform: skew(15deg,15deg);
}