Apakah kod untuk kesan animasi putaran 3D dalam HTML5-Soal Jawab bahagian hadapan-php.cn

Apakah kod untuk kesan animasi putaran 3D dalam HTML5

WBOY

Lepaskan： 2022-01-23 14:46:51

asal

3812 orang telah melayarinya

Dalam HTML5, kod untuk kesan animasi putaran 3D ialah "elemen {animation: name time}@keyframes name {100%{transform:rotate3d(x,y,z,rotation angle);}}" ; Atribut animasi digunakan untuk menentukan sifat animasi elemen.

Apakah kod untuk kesan animasi putaran 3D dalam HTML5

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi HTML5, komputer Dell G3.

Apakah kod kesan animasi putaran 3D dalam HTML5

Anda boleh menggunakan atribut animasi dan peraturan @keyframes untuk mencapai kesan animasi penskalaan elemen melalui peraturan @keyframes boleh buat animasi.

Animasi dicipta dengan menukar secara beransur-ansur satu set gaya CSS kepada yang lain. Anda boleh menukar set gaya CSS ini beberapa kali semasa animasi.

Nyatakan masa apabila perubahan berlaku sebagai peratusan, atau melalui kata kunci "dari" dan "kepada", yang bersamaan dengan 0% dan 100%. 0% ialah masa mula animasi, 100% ialah masa tamat animasi. Untuk sokongan penyemak imbas terbaik, anda harus sentiasa menentukan pemilih 0% dan 100%.

Terdapat juga atribut transformasi yang digunakan untuk menetapkan kesan penskalaan elemen. Sifat transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

Contoh adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            overflow:hidden;
            animation:fadenum 5s ;
        }
        @keyframes fadenum{
          100%{transform:rotateY(70deg);}
}
    </style>
</head>
<body>
    <div><img src="1118.02.png" alt=""></div>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Tutorial yang disyorkan: "video html tutorial》

Atas ialah kandungan terperinci Apakah kod untuk kesan animasi putaran 3D dalam HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!