Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah sifat yang dimiliki oleh transformasi css3?

Apakah sifat yang dimiliki oleh transformasi css3?

青灯夜游asal: 2022-01-13 14:12:381604semak imbas

Terdapat 6 sifat transformasi css3: 1. transform; 3. transform-style; 4. perspektif;

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

Transformasi CSS3 boleh menggerakkan, menskalakan, memutar, memanjangkan atau meregangkan elemen.

Apakah sifat yang dimiliki oleh transformasi css3?

sifat penukaran css3 (penukaran 2D/3D)

属性	说明	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置	3
transform-style	3D空间中的指定如何嵌套元素	3
perspective	指定3D元素是如何查看透视图	3
perspective-origin	指定3D元素底部位置	3
backface-visibility	定义一个元素是否应该是可见的，不对着屏幕时	3

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <style type="text/css">
			#rotate2D, #rotate3D {
			    width: 80px;
			    height: 70px;
			    color: white;
			    font-weight: bold;
			    font-size: 15px;
			    padding: 10px;
			    float: left;
			    margin-right: 50px;
			    border-radius: 5px;
			    border: 1px solid #000000;
			    background: red;
			    margin: 10px;
				transition:transform 2s;
				-webkit-transition:transform 2s; /* Safari */
			}
			#rotate2D:hover{
				transform: rotate(180deg);
			}
			#rotate3D:hover{
				transform: rotateY(180deg);
			}
        </style>
    </head>
    <body>
       <div id="rotate2D">2D 转换</div>
	   <div id="rotate3D">3D 转换</div>
    </body>
</html>

Apakah sifat yang dimiliki oleh transformasi css3?

Pengetahuan lanjutan:

Kaedah penukaran 2D

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

Kaedah penukaran 3D

Fungsi

Penerangan

matrix3d( n,n,n,n,n,n,

函数描述

matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate3d(x,y,z) 定义 3D 转化。

translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。

translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。

translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。

scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。

scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿 X 轴的 3D 旋转。

rotateY(angle) 定义沿 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

perspective(n) 定义 3D 转换元素的透视视图。

n,n,n,n,n,n,n,n,n,n)

Tentukan penjelmaan 3D, menggunakan matriks 4x4 16 nilai.

translate3d(x,y,z)

Tentukan transformasi 3D.

translateX(x)

Mentakrifkan terjemahan 3D menggunakan hanya nilai yang digunakan untuk paksi X.

translateY(y)

Mentakrifkan terjemahan 3D menggunakan hanya nilai yang digunakan untuk paksi Y.

translateZ(z)

Mentakrifkan terjemahan 3D, menggunakan hanya nilai yang digunakan untuk paksi Z.

skala3d(x,y,z)

Tentukan transformasi penskalaan 3D.

scaleX(x)

Takrifkan transformasi penskalaan 3D dengan memberikan nilai paksi X.

scaleY(y)

Takrifkan transformasi penskalaan 3D dengan memberikan nilai paksi Y.

scaleZ(z)

Takrifkan transformasi penskalaan 3D dengan memberikan nilai paksi-Z.

putar3d(x,y,z,sudut)

Tentukan putaran 3D.

rotateX(angle)

Mentakrifkan putaran 3D di sepanjang paksi X.

rotateY(angle)

Mentakrifkan putaran 3D di sepanjang paksi Y.

rotateZ(angle)

Mentakrifkan putaran 3D di sepanjang paksi Z.

perspektif(n)

Tentukan pandangan perspektif bagi elemen yang diubah suai 3D.

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah sifat yang dimiliki oleh transformasi css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 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：Apakah cara untuk mengawal penyembunyian elemen dalam css3Artikel seterusnya：Apakah cara untuk mengawal penyembunyian elemen dalam css3

Artikel berkaitan

Lihat lagi