css-transform-translate

by VIvek Vaishnav

HTML

<div class="content">
<h3>
Original Image
</h3>
<img src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
translate(50px)
</h3>
<img class="translatexy" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
translateX(10%)
</h3>
<img class="translatex" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
translateY(20%)
</h3>
<img class="translatey" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

CSS

.content{width:auto; height: auto; background: #ccc; display:block; float:left; margin:0.5em 1.5em}
h3{text-align:center; background:#f9f393}
.translatexy{transform: translate(50px,10px);}
.translatex{transform: translateX(10%);}
.translatey{transform: translateY(20%);}