溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了HTML與CSS中2D如何轉(zhuǎn)換模塊，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
一. 2D轉(zhuǎn)換模塊
2D轉(zhuǎn)換模塊
/*其中deg是單位, 代表多少度*/
transform: rotate(45deg);/*
第一個參數(shù):水平方向
第二個參數(shù):垂直方向
*/transform: translate(100px, 0px);/*
第一個參數(shù):水平方向
第二個參數(shù):垂直方向
注意點(diǎn):
如果取值是1, 代表不變
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要縮小
如果水平和垂直縮放都一樣, 那么可以簡寫為一個參數(shù)
*//*transform: scale(0.5, 0.5);*/transform: scale(1.5);/*
注意點(diǎn):
1.如果需要進(jìn)行多個轉(zhuǎn)換, 那么用空格隔開
2.2D的轉(zhuǎn)換模塊會修改元素的坐標(biāo)系, 所以旋轉(zhuǎn)之后再平移就不是水平平移的
*/transform: rotate(45deg) translate(100px, 0px);
2D轉(zhuǎn)換模塊
二. 2D轉(zhuǎn)換模塊-形變中心點(diǎn)
默認(rèn)情況下所有的元素都是以自己的中心點(diǎn)作為參考來旋轉(zhuǎn)的, 我們可以通過形變中心點(diǎn)屬性來修改它的參考點(diǎn)
/* 第一個參數(shù):水平方向 第二個參數(shù):垂直方向 注意點(diǎn) 取值有三種形式 具體像素 百分比 特殊關(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);
想圍繞哪個軸旋轉(zhuǎn), 那么只需要在rotate后面加上哪個軸即可;
代碼示例:
<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é): 想圍繞哪個軸旋轉(zhuǎn), 那么只需要在rotate后面加上哪個軸即可 */ transform: rotateY(45deg); } </style> </head> <body> <ul> <li></li> <li></li> <li></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>  </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)塊級元素,用于水平排版
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>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>上述內(nèi)容就是HTML與CSS中2D如何轉(zhuǎn)換模塊，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼