Reflection using Rotation

HTML

<ul>
    
	<li>
	Original <br>
	<img src="//i.imgur.com/8kWBuwm.jpg" class="" height="100" alt="">
	</li>
	 
        <li><hr></li>
        
	<li>
	Flip Horizontal <br>
	<img src="//i.imgur.com/8kWBuwm.jpg" class="img-hor" height="100" alt="">
	</li>
	 
        <li><hr></li>
        
	<li>
	Flip Vertical <br>
	<img src="//i.imgur.com/8kWBuwm.jpg" class="img-vert" height="100" alt="">
	</li>
	 
        <li><hr></li>
        
	<li>  
	Flip Verical + Horizontal <br>
	<img src="//i.imgur.com/8kWBuwm.jpg" class="img-hor-vert" height="100" alt="">
	</li>
    
</ul>

CSS

ul {
    list-style:none;
}

.img-hor {
  transform: rotateY(180deg);
}

.img-vert {
  transform: rotateX(180deg);
}

.img-hor-vert {
  transform: rotateX(180deg) rotateY(180deg);
}