Membuat Animasi 3 Dimensi Menggunakan CSS

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.

27 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat