css-trasform-rotate

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>
Image rotated 170 degree
</h3>
<img class="rotatexy" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
Image rotated 75 degree on X axis
</h3>
<img class="rotatex" src="https://4.bp.blogspot.com/-K-pzSwj0x0o/WX1PfwJMvOI/AAAAAAAAAg8/NWGN-kaG9JYzWsTp1fZfGwr9GwxMqyM6wCLcBGAs/s1600/example.jpg">
</div>

<div class="content">
<h3>
Image rotated 50 degree on Y axis
</h3>
<img class="rotatey" 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:5px}
h3{text-align:center; background:#f9f393}
.rotatexy{transform: rotate(170deg);}
.rotatex{transform: rotateX(75deg);}
.rotatey{transform: rotateY(50deg);}