一、 形變中心點介紹 <style> ul li { width: 100px; height: 100px; list-style: none; float:left; margin:0 auto; /*transform-origin:200px 0px;*/ transform-origin: ...
一、 形變中心點介紹
<style>
ul li {
width: 100px;
height: 100px;
list-style: none;
float:left;
margin:0 auto;
/*transform-origin:200px 0px;*/
transform-origin:80% 80%;
/*第一個參代表水平方向，第二個參數代表垂直方向，註意點：取值有三種形式，具體像素，百分比*/
}
ul li:nth-child(1){
/*預設情況下，所有的元素都是以自己的中心點進行旋轉的,我們可以通過改變形變的中心點*/
background-color: red;
transform:rotate(30deg);
}
ul li:nth-child(2){
background-color: green;
transform:rotate(60deg);
}
ul li:nth-child(3){
background-color: blue;
transform:rotate(110deg);
}
........省略代碼.......
<ul>
<li></li>
<li></li>
<li></li>
</ul>
二、 形變中心軸
<style> *{ margin:0; padding:0; } ul{ width: 800px; height: 500px; border:1px solid black; margin:0 auto; } ul li { list-style: none; width: 200px; height: 200px; margin:0 auto; margin-top:50px; border:1px solid black; } ul li image{ width: 200px; height: 200px; } ul li:nth-child(1){ /*預設情況下所有的元素都是圍繞Z軸進行旋轉的*/ transform:rotateZ(45deg); } ul li:nth-child(2){ /*預設情況下所有的元素都是圍繞Z軸進行旋Y轉的*/ transform:rotateX(45deg); } ul li:nth-child(3){ /*預設情況下所有的元素都是圍繞Z軸進行旋轉的*/ transform:rotateY(45deg); } /*總結:想要圍繞哪個軸旋轉,那麼只需要在rotate後面加上哪個軸即可*/ ..........省略代碼....... <ul> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> </ul>
三、源碼：
D169_ShapeChangePoint.html
D170_RotateAxialDirection.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D169_ShapeChangePoint.html
https://github.com/ruigege66/HTML_learning/blob/master/D170_RotateAxialDirection.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
