Animasi Flip Dengan Menggunakan CSS jQuery

Haloo teman-teman DUMET School, pada kesempatan kali ini saya akan membuat Animasi Flip Dengan Menggunakan CSS Jquery. Langkah pertama untuk membuat Animasi Flip Dengan Menggunakan CSS Jquery yaitu teman-teman buat struktur html seperti pada script di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animasi Flip Dengan Menggunakan CSS Jquery</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <br><br><br><br><br>
   <section id="section-feature" class="container">
    <div class="row">
        <ul>
            <li id="sf-innovation" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                    </div>
                    <div class="sf-mdl-right">
                    </div>
                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-graduation-cap fa-5x"></i>
                        </div>
                        <h3><a href="#">Dumet School</a></h3>
                        <p>Tempat Kursus Website Terbaik dan Nomor Satu</p>
                        
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-graduation-cap fa-5x"></i>
                        </div>
                        <h3><a href="#">Dumet School</a></h3>
                        <p>Tempat Kursus Website Terbaik dan Nomor Satu
                    </div>
                </div>
            </li>

            <li id="sf-community" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                    </div>
                    <div class="sf-mdl-right">
                    </div>
                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-graduation-cap fa-5x"></i>
                        </div>
                        <h3><a href="#">Dumet School</a></h3>
                        <p>Tempat Kursus Website Terbaik dan Nomor Satu</p>
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-graduation-cap fa-5x"></i>
                        </div>
                        <h3><a href="#">Dumet School</a></h3>
                        <p>Tempat Kursus Website Terbaik dan Nomor Satu</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</section>
</body>
</html>

Jika sudah maka tahap selanjutnya kita akan membuat style css seperti di bawah ini.

<style>
        body {
            font-size: 16px;
            line-height: 22px;
            color: #555;
            background: salmon;    
            font-weight: 300;
            text-shadow: rgba(0,0,0,.01) 0 0 1px;
            font-family: 'Roboto Condensed', sans-serif;
            overflow-x: hidden;
            
        }
         
        #section-feature ul {
            margin: 100px 0 0 0;
            padding: 0;
            list-style: none;
            position: relative;
        }

        #section-feature li {
            
            box-sizing: border-box;
            position: relative;
            height: 380px;
            padding: 2%;
            float: left;
            margin-bottom: 40px;     
            user-select: none;
        }

        #section-feature .sf-wrap {
            background-repeat: no-repeat;
            position: absolute;
            max-width: 280px;
            width: 100%;
            height: 100%;
            left: 50%;
            margin-left: -140px;
            top: 0;    
            perspective: 600px;
            cursor: pointer;
        }

        .sf-mdl-left,
        .sf-mdl-right,
        .sf-mdl-left-full,
        .sf-mdl-right-full {
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 100%;     
            transition: all .5s;
            overflow: hidden;
        }

        .sf-icon {
            position: absolute;
            top: 90px;
            text-align: center;
            width: 100%;
            left: 0;
            width: 200%;
            color: #fb527a;
        }

        .sf-mdl-left-full .sf-icon,
        .sf-mdl-right-full .sf-icon {
            color: #fff;
        }

        .sf-mdl-right,
        .sf-mdl-right-full {
            left: auto;
            right: 0;
        }

        .sf-mdl-left-full,
        .sf-mdl-right-full {
            background-color: blue;
            z-index: 9;
            color: #fff;
        }

        .sf-wrap a {
            color: #fff;
            text-decoration: none;
            margin-top: 110px;
        }

        .sf-mdl-left,
        .sf-mdl-right {
            background-color: #fff;
            background-image: url(dumet-school.jpg);
            z-index: 10;
            background: cover;
        }
        .sf-mdl-right{
            background-position: 20px 0px;
        }

        .sf-wrap > .sf-mdl-right-full,
        .sf-wrap > .sf-mdl-right {
            background-position: -140px 0px;
        }

        .sf-wrap > .sf-mdl-right,
        .sf-wrap > .sf-mdl-left-full {     

            backface-visibility: hidden;
            transform-style: preserve-3d;
            transform-origin: 0 0;
            transform: rotateY(0deg);
        }

        .sf-wrap.hover > .sf-mdl-right {     
            transform: rotateY(-45deg);
            background-color: #ececec;
        }

        .sf-wrap > .sf-mdl-left-full {     
            transform-origin: 100% 0;     
            transform: rotateY(180deg);
        }

        .sf-wrap.active > .sf-mdl-right,
        .sf-wrap.hover.active > .sf-mdl-right {     
            transform: rotateY(-180deg);
        }

        .sf-wrap.active > .sf-mdl-left-full {     
            transform: rotateY(0deg);
        }

        .active .sf-mdl-left-full,
        .active .sf-mdl-right-full {
            z-index: 11;
        }

        .sf-wrap div h3 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 22px;
             
        }

        .sf-wrap div h3,
        .sf-wrap div p {
            width: 200%;
            position: absolute;
            text-align: center;
            left: 0;
            top: 190px;
        }

        .sf-wrap div p {
            padding: 0 10%;
            line-height: 18px;
            font-size: 14px;
            top: 180px;
        }

        .sf-wrap div.sf-mdl-right h3,
        .sf-wrap div.sf-mdl-right-full h3,
        .sf-wrap div.sf-mdl-right p,
        .sf-wrap div.sf-mdl-right-full p,
        .sf-mdl-right .sf-icon,
        .sf-mdl-right-full .sf-icon
        {
            left: auto;
            right: 0;
        }

        .sf-wrap div.sf-mdl-left-full h3,
        .sf-wrap div.sf-mdl-right-full h3 {
            top: 175px;
        }   
        p{
            margin-top: 55px;
        }

        a{
            margin-top: 50px;
        }

</style>

Dan langkah terakhir buat script jquery untuk menjalankan animasi flip dengan menambahkan class hover atau aktif.

<script>
    $(function () {
    $('#section-feature .sf-wrap')
        .hover(function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        })
        .click(function(event) {
            //if (event.target.nodeName != 'A') {
                $(this).toggleClass('active');
            //}
        });
});
    
</script>

Jika dibuka dihalaman browser maka akan tampil seperti pada gambar di bawah ini.

Demikian artikel tentang cara membuat Animasi Flip Dengan Menggunakan CSS Jquery. Semoga dapat bermanfaat dan selamat mencoba.