WP PHP Code: Kode Cover/BackCover Berputar

Referensi: http://archive.makzan.net/web-design-scrapbook/the-css-3d-book-flipping-effect/

Instal Plugin AFC = Advanced Field Customs
Buat filed dengan nama cover.

WP-PostViews (https://wordpress.org/plugins/wp-postviews/) >> setingnya: everyone

Kode di index.php atau post-homepage.php:

<?php
$my_cover = get_post_meta( get_the_ID(), 'cover', true);
if( ! empty( $my_cover ) ) {
echo '<div style="float:left;"><div class="box-scene">
    <div class="box">
        <div class="front face">
            <img src="http://books.google.co.id/books/content?id=' . $my_cover . '&printsec=frontcover&img=1&zoom=1&edge=curl" width="128" height="195px" style="float:left;padding-left:4px;" >
        </div>
        <div class="side face">
            <img src="http://books.google.co.id/books/content?id=' . $my_cover . '&printsec=backcover&img=1&zoom=1" width="128" height="195px" style="float:left;padding-left:4px;">
        </div>
    </div>
</div></div>';
}
?>

Kode lengkap isi full post-homepage.php:


<?php global $theme; ?>



<span style="width: 146px; height: 320px; float: left; margin-right: 5px; margin-bottom: 5px; overflow: hidden; padding-bottom: 15px;">

    <div <?php post_class('post clearfix'); ?> id="post-<?php the_ID(); ?>">




    <?php
$my_cover = get_post_meta( get_the_ID(), 'cover', true);
if( ! empty( $my_cover ) ) {
echo '<div style="float:left;"><div class="box-scene">
    <div class="box">
        <div class="front face">
            <img src="http://books.google.co.id/books/content?id=' . $my_cover . '&printsec=frontcover&img=1&zoom=1&edge=curl" width="128" height="195px" style="float:left;padding-left:4px;" >
        </div>
        <div class="side face">
            <img src="http://books.google.co.id/books/content?id=' . $my_cover . '&printsec=backcover&img=1&zoom=1" width="128" height="195px" style="float:left;padding-left:4px;">
        </div>
    </div>
</div></div>';
}
?>

<div class="clearfix"> </div>
<p style="text-align:center;line-height: 13px;font-size:12px;">
<b><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'themater' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></b>   <br/>
 (Hits: <?php the_views(); ?>)<br/>
   <b>Oleh:</b><br/> <?php the_field('penulis'); ?><br/>
<b>Penerbit:</b><br/> <?php the_category(', '); ?></p>





    </div><!-- Post ID <?php the_ID(); ?> -->

    </span>






=================================
Kode di CSS style.php:


.box-scene {
    -webkit-perspective: 5300;
    width: 128px;
    height: 195px;
    margin-bottom: 10px;

}

.box-scene:hover .box {
    -webkit-transform: rotateY(-90deg);
}
.box {
  position: relative;
    width: 128px;
    height: 195px;


    -webkit-transform-style: preserve-3d;

    -webkit-transition: all 0.4s ease-out;
    -webkit-transform-origin: 30px 30px -30px;

    /* float: left; */
    margin: 5px 0 5px 0;


}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: visible;
    -webkit-transform-origin: 0 0;
}
.front {
    -webkit-transform: rotateY(0deg);
    z-index: 2;
    background: #ffffff;

}
.side {
    background: #ffffff;
    -webkit-transform: rotateY(90deg);
    z-index: 1;
    left: 128px;
}