Verschieben nach rechts unten durch positive Werte
.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: 60px auto;
}
.box:hover {
-webkit-transform: translate(15px, 50px);
-moz-transform: translate(15px, 50px);
-o-transform: translate(15px, 50px);
-ms-transform: translate(15px, 50px);
transform: translate(15px, 50px);
}
Verschieben nach links oben durch negative Werte
.box:hover {
-webkit-transform: translate(-15px, -50px);
-moz-transform: translate(-15px, -50px);
-o-transform: translate(-15px, -50px);
-ms-transform: translate(-15px, -50px);
transform: translate(-15px, -50px);
}
Verschieben nach rechts
.box:hover {
-webkit-transform: translateX(15px);
-moz-transform: translateX(15px);
-o-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
}
Verschieben nach oben
.box:hover {
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-o-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
Verschobenes Bild
.img:hover {
-webkit-transform: translate(15px,15px);
-moz-transform: translate(15px,15px);
-o-transform: translate(15px,15px);
-ms-transform: translate(15px,15px);
transform: translate(15px,15px);
}
Text verschieben
olivergast.de
.text:hover {
-webkit-transform: translate(-50px,10px);
-moz-transform: translate(-50px,10px);
-o-transform: translate(-50px,10px);
-ms-transform: translate(-50px,10px);
transform: translate(-50px,10px);
}