Membuat Animasi 3 Dimensi Menggunakan CSS

27/10/2019    Shelli Ripati    50     Website

Hallo teman-teman DUmet School, pada kesempatan kali ini saya akan Membuat Animasi 3 Dimensi Menggunakan CSS. Dimana animasi 3 dimensi yang akan saya buat yaitu membuat sebuah tampilan seperti efek 3 dimensi yang berisi text dengan animasi berjalan. Langkah pertama untuk membuat Membuat Animasi 3 Dimensi Menggunakan CSS teman-teman buat terlebih dahulu tampilan struktur htmlnya seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Membuat Animasi 3 Dimensi Menggunakan CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <div class="text satu">
            <span>Selamat Datang Di Dumet School</span>
        </div>
        <div class="text dua">
            <span>Selamat Datang Di Dumet School</span>
        </div>
    </div>
</body>
</html>

Di dalam file index.html diatas sudah saya siapkan dua div yang berisi tulisan "Selamat Datang Di Dumet School". Dimana tulisan ini akan saya buat berjalan. Sedangkan div yang membungkus tulisan masing-masing akan saya buat agar terlihat seperti 3 dimensi.

Langsung saja untuk tahap selanjutnya teman-teman buat file baru dengan nama file style.css dan berikut ini adalah scriptnya.

body{
    margin:0;
    padding: 0;
    background-color: salmon;
}
.box{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:1000px;
    height:150px;
}
.box .text{
    position: absolute;
    width: 500px;
    height: 150px;
    font-size: 70px;
    text-align: center;
    line-height:150px;
}
.box .text span{
    width: 100%;
    height: 100%;
    display: block;
    transition: .5s;
}
.box .text.satu {
    background-color: lightblue;
    color:#fff;
    transform-origin: left;
    left:0;
    transform: perspective(800px) rotateY(-65deg);
    overflow: hidden;
}
.box .text.dua {
    background-color: blue;
    color:#fff;
    transform-origin: right;
    right:0;
    transform: perspective(800px) rotateY(65deg);
    overflow: hidden;
}
.box .text.satu span{
    position: absolute;
    animation: animate1 10s linear infinite;
}
@keyframes animate1{
    0%{
        left:200%;
    }100%{
        left:-100%;
    }
}
.box .text.dua span{
    position: absolute;
    animation: animate2 10s linear infinite;
}
@keyframes animate2{
    0%{
        left:100%;
    }100%{
        left:-200%;
    }

 Jika sudah maka teman-teman buka di halaman browser masing-masing, maka akan tampil seperti pada gambar di bawah ini. Dimana tampilan div yang membukus text selamat datang saya buat seperti efek 3 dimensi dan kemudian tulisannya akan bergerak seakan dari div satu ke div lainnya.

Membuat Animasi 3 Dimensi Menggunakan CSS

Demikian artikel tentang cara Membuat Animasi 3 Dimensi Menggunakan CSS. Semoga dapat bermanfaat dan selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More