Rumah > Artikel > hujung hadapan web > Adakah terjemah harta css3?

Adakah terjemah harta css3?

WBOYasal: 2022-06-23 15:47:422389semak imbas

Terjemah ialah atribut CSS baharu bagi CSS3; atribut terjemah digunakan untuk mentakrifkan transformasi terjemahan 2D bagi elemen ini sering digunakan bersama-sama dengan atribut transformasi boleh menggunakan 2D atau 3D transformasi kepada elemen. Sintaksnya ialah "transform:translate(jarak terjemahan paksi-x, jarak terjemahan paksi-y)".

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

terjemah ialah sifat css3

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

terjemah(x,y) mentakrifkan transformasi 2D. Sintaks

adalah seperti berikut:

transform:translate(<translation-value>[, <translation-value>]);

Fungsi translate() boleh menggerakkan elemen.

Nilai:

terjemah([, ]); nilai terjemahan> mewakili jumlah anjakan. Mengandungi dua parameter Jika parameter kedua ditinggalkan, parameter kedua ialah 0 jika parameter negatif, ia bermakna bergerak ke arah yang bertentangan.

translateX(); bermaksud menggerakkan elemen hanya dalam paksi-X (arah mendatar).

translateY(); bermaksud menggerakkan elemen hanya dalam paksi Y (arah menegak).

translateZ(); bermaksud menggerakkan elemen hanya pada paksi Z, dengan syarat elemen itu sendiri atau elemen induk elemen mempunyai set nilai perspektif.

Contoh adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* 标准语法 */
}
</style>
</head>
<body>
<h1>translate() 方法</h1>
<p>translate() 方法从元素当前位置对其进行移动：</p>
<div>
该 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素。
</div>
</body>
</html>

Hasil output:

Adakah terjemah harta css3?

(Belajar perkongsian video: css tutorial video , tutorial video html)

Atas ialah kandungan terperinci Adakah terjemah harta css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 html transform

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：Adakah float merupakan ciri baharu css3?Artikel seterusnya：Adakah float merupakan ciri baharu css3?

Artikel berkaitan

Lihat lagi