Rumah > Artikel > hujung hadapan web > Apakah sifat yang boleh mencapai kesan zum dalam css3

Apakah sifat yang boleh mencapai kesan zum dalam css3

WBOYasal: 2022-06-08 15:51:124815semak imbas

Dalam CSS3, atribut yang boleh mencapai kesan penskalaan ialah "transform"; atribut ini boleh digunakan dengan fungsi skala() untuk menskalakan elemen apabila parameter ditetapkan kepada satu, ia bermakna mendatar dan penskalaan menegak secara keseluruhan , apabila parameter ditetapkan kepada dua, ia bermakna masing-masing menetapkan gandaan penskalaan mendatar dan menegak, dan sintaksnya ialah "elemen {transform:scale (nilai skala mendatar, nilai skala menegak);}".

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

Dalam css3, atribut yang boleh mencapai kesan penskalaan

Dalam css3, anda boleh menggunakan atribut transform bersama-sama dengan fungsi skala() untuk mencapai kesan penskalaan elemen.

Atribut transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

Fungsi skala() digunakan untuk mentakrifkan penskalaan 2D unsur.

Sintaks adalah seperti berikut:

元素{transform:scale(横向缩放值,竖向缩放值);}

Contohnya adalah seperti berikut:

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

Hasil output:

Apakah sifat yang boleh mencapai kesan zum dalam css3

(Ketahui perkongsian Video: tutorial video css)

Atas ialah kandungan terperinci Apakah sifat yang boleh mencapai kesan zum dalam css3. 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：Apakah baris pertama kod dalam html5Artikel seterusnya：Apakah baris pertama kod dalam html5

Artikel berkaitan

Lihat lagi