Adakah terdapat nilai negatif untuk paksi z bagi satah 3 dimensi dalam css3?

Paksi z bagi satah 3 dimensi dalam css3 mempunyai nilai negatif. Dalam sistem koordinat 3 dimensi, nilai paksi-z ke arah luar skrin adalah positif, dan nilai ke arah dalam skrin adalah negatif apabila paksi-z dalam nilai atribut translate3D adalah negatif, iaitu elemen dialihkan ke dalam skrin, dan sintaksnya ialah "transform:translate3d(x, y,z)".

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

Adakah terdapat nilai negatif untuk paksi-z bagi satah 3 dimensi dalam css3?

Adakah terdapat nilai negatif untuk paksi-z bagi satah 3 dimensi dalam css3?

Sistem koordinat tiga dimensi Ia merujuk kepada ruang tiga dimensi Ruang terdiri daripada tiga paksi Paksi Z adalah positif di luar skrin dan negatif di dalam.

Pergerakan 3D translate3D

transform: translateX(100px) translateY(100px) translateZ(100px);简写方法transform:translate3d（x，y，z）

x, y, z tidak boleh ditinggalkan, jika tidak, tulis 0

pergerakan 3D dalam pergerakan 2D Hidup asas Penglihatan adalah tiga dimensi, tetapi kesannya hanya dua dimensi.

transform：translateX（100px），仅仅在X轴移动
transform：translateY（100px），仅仅在Y轴移动
transform：translateZ（100px），仅仅在Z轴移动
transform：translate3d（x，y，z），设置，xyz的值，z要用像素单位，不带百分比

1 Jika anda ingin menghasilkan kesan 3D dalam halaman web, perspektif diperlukan (difahami sebagai objek 3D yang ditayangkan dalam satah 2D)

2 , anda boleh memikirkan untuk mengatur satu mata untuk Lihat
3 Perspektif juga dipanggil jarak visual: jarak visual ialah jarak dari mata manusia ke skrin

4 adalah pada satah komputer, semakin besar imej itu, semakin jauh imej itu, semakin kecil imej itu

5 Unit perspektif ialah piksel

Perspektif ditulis pada kotak induk bagi elemen yang diperhatikan

d: Ia ialah jarak tontonan, dan jarak tontonan ialah Jarak dari mata manusia ke skrin.

z: Ia ialah paksi-z, jarak antara objek dan skrin Semakin besar paksi-z (nilai positif), semakin besar objek yang kita lihat.

translateZ

Beri kotak induk nilai perspektif dan berikan div berbeza nilai z berbeza, dan kesan yang anda akan lihat adalah berbeza.

Putaran 3D rotate3d

transform:rotate3d(x,y,z,deg), putar sudut deg sepanjang paksi tersuai (faham sahaja)

xyz mewakili vektor paksi putaran, menunjukkan putaran sepanjang paksi vektor, dan yang terakhir mewakili sudut putaran

Putaran 3D boleh membuatkan elemen bergerak sepanjang paksi-x, y -paksi, dan z dalam satah tiga dimensi Paksi atau putaran paksi tersuai

Sintaks:

Untuk menilai arah putaran elemen, kita memerlukan kriteria sebelah kiri

transform:rotate3d(1,0,0,45deg)x轴旋转45deg
transform:rotate3d(1,1,0,45deg)对角线旋转45deg

Kriteria tangan kiri:

Ibu jari tangan kiri menghala ke arah positif paksi-x

Arah di mana jari-jari lain dibengkokkan ialah arah ke yang mana unsur berputar sepanjang paksi-x.

transform:rotatex(45deg):沿x轴正方向旋转45deg
transform:rotatey(45deg):沿y轴正方向旋转45deg
transform:rotatez(45deg):沿z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可）

Kriteria kiri juga boleh digunakan

Putaran paksi Z:

Tiada perbezaan daripada putaran 2d

3D rendering transform-style

1 Kawal sama ada sub-elemen mendayakan persekitaran tiga dimensi

2: Sub-elemen rata tidak mendayakan tiga-. ruang dimensi, lalai

3 transform-style: preserve-3d , elemen anak membuka ruang tiga dimensi

4 kotak kanak-kanak

5. Atribut ini sangat penting, dan mesti digunakan kemudian

sintaks:

2. Gaya CSS

kotak menentukan saiz, ingat untuk menambah rendering 3d

kotak belakang harus diputar 180 darjah sepanjang paksi-y

Akhirnya tetikus melalui kotak dan berputar 180 darjah sepanjang paksi-y

(Mempelajari perkongsian video:

tutorial video css

)

Atas ialah kandungan terperinci Adakah terdapat nilai negatif untuk paksi z bagi satah 3 dimensi dalam css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!