Rumah > hujung hadapan web > tutorial css > Bagaimana untuk membuat skala dan berputar dalam css

Bagaimana untuk membuat skala dan berputar dalam css

WBOY
Lepaskan: 2021-12-03 10:04:00
asal
3186 orang telah melayarinya

Dalam CSS, anda boleh menggunakan atribut transformasi untuk mencapai kesan putaran dan penskalaan elemen Sintaks ialah "elemen {transform:scale (nilai skala mendatar, nilai skala menegak); transform:rotate (sudut putaran. nilai); }".

Bagaimana untuk membuat skala dan berputar dalam css

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

Cara menskala dan memutar css

Dalam css, anda boleh menggunakan atribut transformasi untuk menetapkan penskalaan dan putaran elemen daripada atribut ini adalah untuk melaraskan operasi Putar, skala, gerakkan atau condongkan.

1. Penskalaan

Apabila nilai penjelmaan ialah skala(), elemen tersebut boleh diskalakan seperti berikut:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:scale(0.5,0.5);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk membuat skala dan berputar dalam css

2 Putaran

Apabila nilai transformasi diputar(), anda boleh menetapkan elemen. operasi putaran, contoh Seperti berikut:

<!DOCTYPE html>
<html>
<head>
<style> 
div{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:rotate(9deg);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
Salin selepas log masuk

Hasil output:

Bagaimana untuk membuat skala dan berputar dalam css

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk membuat skala dan berputar dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan