HTML连载68-形变中心点、形变中心轴

一、 形变中心点介绍

 

    <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大数据学习视频礼包