HTML連載68-形變中心點、形變中心軸

1、 形變中心點介紹

 

    <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>

 

 

2、 形變中心軸

 

  

  <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>

 

3、源碼：

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大數據學習視頻禮包