Mengapa Putaran Imej CSS3 360 Darjah Saya Tidak Berfungsi?

Animasi Putar CSS3

Anda menghadapi masalah dengan CSS anda semasa cuba memutarkan imej 360 darjah. Kod CSS yang disediakan nampaknya menyertakan ralat sintaks dalam bingkai utama, yang menghalang animasi daripada dilaksanakan. Mari kita teliti butiran masalah dan berikan pembetulan yang diperlukan.

Ralat sintaks terletak pada sifat 'dari' dan 'kepada' dalam pengisytiharan bingkai utama. Untuk penyemak imbas moden, sifat transformasi 'transform' berfungsi dengan lebih berkesan daripada awalan vendor seperti '-webkit-transform' dan '-moz-transform'. Selain itu, sifat 'kepada' harus ditakrifkan pada 100% dan bukannya 'daripada'.

Berikut ialah kod CSS yang diperbetulkan:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

Dalam kod yang diperbetulkan, sifat 'daripada' telah dialih keluar, dan nilai transformasi dalam sifat 'ke' telah dikemas kini kepada 'putar(360deg)'. Selain itu, peraturan bingkai utama kini hanya menggunakan 'transformasi' tanpa awalan vendor.

CSS yang diperbetulkan ini harus menyelesaikan isu animasi, membenarkan imej berputar 360 darjah dengan lancar.

Atas ialah kandungan terperinci Mengapa Putaran Imej CSS3 360 Darjah Saya Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!