Bagaimana untuk memutar imej dan membalikkannya dengan css-tutorial css-php.cn

Bagaimana untuk memutar imej dan membalikkannya dengan css

WBOY

Lepaskan： 2021-12-10 18:44:30

asal

3488 orang telah melayarinya

Kaedah: 1. Gunakan gaya "animation: name time" untuk mengikat animasi pada elemen gambar 2. Gunakan "@keyframes name {50%{transform:rotate(rotation angle value);}} " kenyataan, Tetapkan tindakan animasi putaran imej untuk mencapai kesan putaran imej dan undur ke belakang.

Bagaimana untuk memutar imej dan membalikkannya dengan css

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

Cara memutar dan membalikkan imej dalam css

Dalam css, anda boleh menggunakan atribut animasi untuk mengikat animasi pada elemen atribut animasi Anda boleh mengawal tempoh dan masa animasi Sintaksnya ialah:

animation: name duration timing-function delay iteration-count direction;

Salin selepas log masuk

Dalam CSS, anda boleh menggunakan atribut animasi dan peraturan @keyframes untuk mencapai kesan animasi penskalaan elemen , anda boleh membuat 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%.

Gunakan atribut transform dengan fungsi rotate() untuk menetapkan tindakan animasi putaran.

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{
          50%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div><img src="1118.02.png" alt=""></div>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk memutar imej dan membalikkannya dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!