本文主要是介绍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大数据学习视频礼包
这篇关于HTML连载68-形变中心点、形变中心轴的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
