一. 2D轉(zhuǎn)換模塊

2D轉(zhuǎn)換模塊

/*其中deg是單位, 代表多少度*/
transform: rotate(45deg);/*
第一個(gè)參數(shù):水平方向
第二個(gè)參數(shù):垂直方向
*/transform: translate(100px, 0px);/*
第一個(gè)參數(shù):水平方向
第二個(gè)參數(shù):垂直方向
注意點(diǎn):
如果取值是1, 代表不變
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要縮小
如果水平和垂直縮放都一樣, 那么可以簡(jiǎn)寫為一個(gè)參數(shù)
*//*transform: scale(0.5, 0.5);*/transform: scale(1.5);/*
注意點(diǎn):
1.如果需要進(jìn)行多個(gè)轉(zhuǎn)換, 那么用空格隔開(kāi)
2.2D的轉(zhuǎn)換模塊會(huì)修改元素的坐標(biāo)系, 所以旋轉(zhuǎn)之后再平移就不是水平平移的
*/transform: rotate(45deg) translate(100px, 0px);

2D轉(zhuǎn)換模塊

二. 2D轉(zhuǎn)換模塊-形變中心點(diǎn)

默認(rèn)情況下所有的元素都是以自己的中心點(diǎn)作為參考來(lái)旋轉(zhuǎn)的, 我們可以通過(guò)形變中心點(diǎn)屬性來(lái)修改它的參考點(diǎn)

/*第一個(gè)參數(shù):水平方向第二個(gè)參數(shù):垂直方向取值有三種形式特殊關(guān)鍵字/*transform-origin: 200px 0px;*//*transform-origin: 50% 50%;*//*transform-origin: 0% 0%;*//*transform-origin: center center;*/transform-origin: left top;

三.透視屬性(perspective: 500px;) 和 旋轉(zhuǎn)軸向 (transform: rotateY(45deg);)

1.perspective: 500px;

1.1什么是透視

近大遠(yuǎn)小

1.2.注意點(diǎn)

一定要注意, 透視屬性必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面

2.transform: rotateY(45deg);

想圍繞哪個(gè)軸旋轉(zhuǎn), 那么只需要在rotate后面加上哪個(gè)軸即可;

代碼示例:

 html lang= en head  meta charset= UTF-8  title 95-2D轉(zhuǎn)換模塊-旋轉(zhuǎn)軸向 /title  style *{ margin: 0; padding: 0; } ul{ width: 800px; height: 500px; margin: 0 auto; } ul li{ list-style: none; width: 200px; height: 200px; margin: 0 auto; margin-top: 50px; border: 1px solid #000; /* 1.什么是透視 近大遠(yuǎn)小 2.注意點(diǎn) 一定要注意, 透視屬性必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面 */ perspective: 500px; } ul li img{ width: 200px; height: 200px;  /*perspective: 500px;*/ } ul li:nth-child(1){  /*默認(rèn)情況下所有元素都是圍繞Z軸進(jìn)行旋轉(zhuǎn)*/ transform: rotateZ(45deg); } ul li:nth-child(2) img{ transform: rotateX(45deg); } ul li:nth-child(3) img{ /* 總結(jié): 想圍繞哪個(gè)軸旋轉(zhuǎn), 那么只需要在rotate后面加上哪個(gè)軸即可 */ transform: rotateY(45deg); } /style /head body ul li ![](images/rotateZ.jpg) /li li ![](images/rotateX.jpg) /li li ![](images/rotateY.jpg) /li /ul /body /html 

四. 撲克牌練習(xí)

 html lang= en  head  meta charset= UTF-8  title 96-2D轉(zhuǎn)換模塊-練習(xí) /title  style  *{ margin: 0; padding: 0; }  p{ width: 310px; height: 438px; border: 1px solid #000;  background-color: skyblue; margin: 100px auto; perspective: 500px; }  p img{ transform-origin: center bottom; transition: transform 1s; } p:hover img{ transform: rotateX(80deg); }  /style /head body p ![](images/pk.png) /p  /body  /html 

五. 照片墻

 html lang= en  head  meta charset= UTF-8  title 97-2D轉(zhuǎn)換模塊-相片墻 /title  style  *{ margin: 0; padding: 0; } ul{ height: 400px; border: 1px solid #000; background-color: skyblue; margin-top: 100px; text-align: center; } ul li{ list-style: none;  width: 150px; height: 200px;  background-color: red; display: inline-block; //轉(zhuǎn)換成行內(nèi)塊級(jí)元素,用于水平排版  margin-top: 100px; transition: all 1s;  position: relative; box-shadow: 0 0 10px; }  ul li:nth-child(1){ transform: rotate(30deg); }  ul li:nth-child(2){ transform: rotate(-40deg); }  ul li:nth-child(3){ transform: rotate(10deg); } ul li:nth-child(4){ transform: rotate(45deg); }  ul li img{ width: 150px; height: 200px;  border: 5px solid #fff; box-sizing: border-box; ul li:hover{ /*transform: rotate(0deg);*/  /*transform: none;*/ transform: scale(1.5); //之前的旋轉(zhuǎn)被層疊掉, 只執(zhí)行放大  z-index: 998;  //顯示在最上面 /style  /head  body  li ![](images/1.jpg) /li  li ![](images/2.jpg) /li  li ![](images/3.jpg) /li  li ![](images/4.jpg) /li  /ul  /body  /html 

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php 其它相關(guān)文章！

推薦閱讀：

網(wǎng)頁(yè)的布局方式之清除浮動(dòng)

網(wǎng)頁(yè)的布局方式與浮動(dòng)

HTML與CSS的盒子模型

CSS的背景與精靈圖

以上就是HTML與CSS中2D轉(zhuǎn)換模塊的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。