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

Bagaimana untuk membuat skala dan berputar dalam css

WBOYasal: 2021-12-03 10:04:003173semak imbas

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); }".

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>

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>

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!

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menulis segi empat tepat bulat dalam cssArtikel seterusnya：Bagaimana untuk menulis segi empat tepat bulat dalam css

Artikel berkaitan

Lihat lagi