Flipping product images for Woocommerce

functions.php

<?php 
// Add the first gallery image to the item within the cateogry view.
// this hooks on to the content title before hook
function vakrerom_additional_image_on_category(){
  global $product;
  $attachment_ids = $product->get_gallery_attachment_ids();
  if (!empty($attachment_ids)){
    foreach( array_slice( $attachment_ids , 0, 1)  as $attachment_id ) {
      $image_link = wp_get_attachment_url( $attachment_id ); ?>
      <span class="image--lookbook">
        <img src="<?php  echo $image_link ?>" alt="" />
      </span>
  <?php } // end foreach
  } // end if
} //end fucntion
add_action( 'woocommerce_before_shop_loop_item', 'vakrerom_additional_image_on_category' );

style.scss

/**
 * Lookbook on Category items
 */
li.product > a:first-of-type{
	position: relative;
	perspective: 1000;
	transform-style: preserve-3d;

	span ~ img{
		transform: rotate3d( 0, 1, 0, 0deg );
    transform-style: preserve-3d;
		transition: 0.4s transform ease-in-out;
		position: relative;
		z-index: 100;
    backface-visibility: hidden;
	}
}

.image--lookbook {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
	transform: rotate3d( 0, 1, 0, -180deg );
  transform-style: preserve-3d;
	transition: 0.4s transform ease-in-out;
  backface-visibility: hidden;
  box-shadow: 0 0 0 -1px black;


	// Hovever, if the product is hovered, then we're going to show the lookbook item
	// either sliding it out to the side, or replacing the current image with the lookbook
	// version. Perhaps we just switch them out fancy animation and done.

	li.product:hover & {
		transform: rotate3d( 0, 1, 0, 0deg ) translateY( -0.75rem );
		box-shadow: 0 10px 30px -20px black;

		~ img{
			transform: rotate3d( 0, 1, 0, 180deg ) translateY( -0.75rem );
		}
	}
}