溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了HTML與CSS中2D如何轉換模塊，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
一. 2D轉換模塊
2D轉換模塊
/*其中deg是單位, 代表多少度*/
transform: rotate(45deg);/*
第一個參數:水平方向
第二個參數:垂直方向
*/transform: translate(100px, 0px);/*
第一個參數:水平方向
第二個參數:垂直方向
注意點:
如果取值是1, 代表不變
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要縮小
如果水平和垂直縮放都一樣, 那么可以簡寫為一個參數
*//*transform: scale(0.5, 0.5);*/transform: scale(1.5);/*
注意點:
1.如果需要進行多個轉換, 那么用空格隔開
2.2D的轉換模塊會修改元素的坐標系, 所以旋轉之后再平移就不是水平平移的
*/transform: rotate(45deg) translate(100px, 0px);
2D轉換模塊
二. 2D轉換模塊-形變中心點
默認情況下所有的元素都是以自己的中心點作為參考來旋轉的, 我們可以通過形變中心點屬性來修改它的參考點
/* 第一個參數:水平方向 第二個參數:垂直方向 注意點 取值有三種形式 具體像素 百分比 特殊關鍵字 */ /*transform-origin: 200px 0px;*/ /*transform-origin: 50% 50%;*/ /*transform-origin: 0% 0%;*/ /*transform-origin: center center;*/ transform-origin: left top;
三.透視屬性(perspective: 500px;) 和 旋轉軸向 (transform: rotateY(45deg);)
1.perspective: 500px;
1.1什么是透視
近大遠小
1.2.注意點
一定要注意, 透視屬性必須添加到需要呈現近大遠小效果的元素的父元素上面
2.transform: rotateY(45deg);
想圍繞哪個軸旋轉, 那么只需要在rotate后面加上哪個軸即可;
代碼示例:
<html lang="en"> <head>
<meta charset="UTF-8">
<title>95-2D轉換模塊-旋轉軸向</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.什么是透視 近大遠小
2.注意點 一定要注意, 透視屬性必須添加到需要呈現近大遠小效果的元素的父元素上面 */
perspective: 500px; } ul li img{ width: 200px; height: 200px;
/*perspective: 500px;*/
} ul li:nth-child(1){
/*默認情況下所有元素都是圍繞Z軸進行旋轉*/
transform: rotateZ(45deg); } ul li:nth-child(2) img{ transform: rotateX(45deg); } ul li:nth-child(3) img{ /* 總結: 想圍繞哪個軸旋轉, 那么只需要在rotate后面加上哪個軸即可 */ transform: rotateY(45deg); } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
四. 撲克牌練習
<html lang="en">
<head>
<meta charset="UTF-8">
<title>96-2D轉換模塊-練習</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轉換模塊-相片墻</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;
//轉換成行內塊級元素,用于水平排版
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);
//之前的旋轉被層疊掉, 只執行放大
z-index: 998;
//顯示在最上面
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>上述內容就是HTML與CSS中2D如何轉換模塊，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
