css3中2d变形有几种？
css3中2d变形4种：1、位移translate()，将元素在水平或垂直方向上移动指定距离；2、缩放scale()，对元素进行水平或垂直方向的缩放；3、旋转rotate()，可以对元素进行旋转；4、倾斜skew()，对元素进行倾斜转换。
【推荐教程：CSS视频教程 】
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform
1、移动 translate(x, y)
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 走的自己的一半 */
}让定位的盒子水平居中
2、缩放 scale(x, y)
transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
3、旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
transform:rotate(45deg);
- 当元素旋转以后，坐标轴也跟着发生的转变
- 调整顺序可以解决，把旋转放到最后
- 注意单位是 deg 度数
案例旋转扑克牌
body {
background-color: skyblue;
}
.container {
width: 100px;
height: 150px;
border: 1px solid gray;
margin: 300px auto;
position: relative;
}
.container > img {
display: block;
width: 100%;
height: 100%;
position: absolute;
transform-origin: top right;
/* 添加过渡 */
transition: all 1s;
}
.container:hover img:nth-child(1) {
transform: rotate(60deg);
}
.container:hover img:nth-child(2) {
transform: rotate(120deg);
}
.container:hover img:nth-child(3) {
transform: rotate(180deg);
}
.container:hover img:nth-child(4) {
transform: rotate(240deg);
}
.container:hover img:nth-child(5) {
transform: rotate(300deg);
}
.container:hover img:nth-child(6) {
transform: rotate(360deg);
}4、倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
transform-origin可以调整元素转换的原点
p{transform-origin: left top;transform: rotate(45deg); }
/* 改变元素原点到左上角，然后进行顺时旋转45度 */变形-移动
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>2D变形-移动</title>
<style>
p {
width: 100px;
height: 100px;
background-color: pink;
transition: all 0.5s; /* 过渡效果 */
}
p:active {
/* transform: translateX(100px);X轴 */
/* a:activ
鼠标没点击没有松开鼠标的时候触发的状态 相当于点击 */
/* 只有一个参数就是 X轴 */
/* transform: translate(50px); */
transform: translateY(100px); /* Y轴 */
/* transform: translate(100px,100px); */
}
</style></head><body>
<p></p></body></html>定位的盒子完美居中写法
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>让定位的盒子居中对齐</title>
<style>
p {
width: 200px;
height: 200px;
background-color: skyblue;
/* transform: translate(100px); */ /* 水平移动100px; */
/*transform: translate(50%); p自己的width的百分比 */
/* 之前盒子居中定位 */
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px; 需要计算不合适 */
transform: translate(-50%,-50%);
}
</style></head><body>
<p></p></body></html>
设置变形中心点
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>设置变形中心点</title>
<style>
img {
margin: 200px;
transition: all 0.6s;
/*transform-origin: center center; 默认 */
transform-origin: bottom right;
}
img:hover {
transform: rotate(360deg); /* 旋转180度 */
}
</style></head><body>
<p>
<img src="images/pk1.png" width="200" alt="">
</p></body></html>旋转的图片
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>旋转的楚乔传</title>
<style>
p {
width: 200px;
height: 100px;
border: 1px solid skyblue;
margin: 200px auto;
position: relative;
}
p img {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
p:hover img:nth-child(1) { /* 鼠标经过p 第一张图片旋转 */
transform: rotate(60deg);
}
p:hover img:nth-child(2) { /* 鼠标经过p 第一张图片旋转 */
transform: rotate(120deg);
}
p:hover img:nth-child(3) { /* 鼠标经过p 第一张图片旋转 */
transform: rotate(180deg);
}
p:hover img:nth-child(4) { /* 鼠标经过p 第一张图片旋转 */
transform: rotate(240deg);
}
p:hover img:nth-child(5) { /* 鼠标经过p 第一张图片旋转 */
transform: rotate(300deg);
}
p:hover img:nth-child(6) { /* 鼠标经过p 第一张图片旋转 */
transform: rotate(360deg);
}
</style></head><body>
<p>
<img src="images/6.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/1.jpg" alt="">
</p></body></html>更多编程相关知识，请访问：编程学习网站！！
Atas ialah kandungan terperinci css3中2d变形有几种？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara melihat tarikh bootstrap
Apr 07, 2025 pm 03:03 PM
Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.
Cara Mengesahkan Tarikh Bootstrap
Apr 07, 2025 pm 03:06 PM
Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.
Cara menetapkan bar navigasi bootstrap
Apr 07, 2025 pm 01:51 PM
Bootstrap Menyediakan panduan mudah untuk menubuhkan bar navigasi: Memperkenalkan Perpustakaan Bootstrap untuk membuat bar navigasi Tambah Identiti Jenama Buat Pautan Navigasi Tambah Elemen Lain (Pilihan) Laraskan Gaya (Pilihan)
