First, the deformation of the center point of introduction
<style> ul li { width: 100px; height: 100px; list-style: none; float:left; margin:0 auto; /*transform-origin:200px 0px;*/ transform-origin:80% 80%; / * The first parameter represents the horizontal direction, the second parameter represents the vertical direction, points Note: values in three forms, specific pixels, the percentage of * / } ul li:nth-child(1){ / * By default, all the elements are in their own center point of rotation, we can change the deformation of the center point * / 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); } ....... ........ omitted Code <ul> <li></li> <li></li> <li></li> </ul>
Second, the deformation of the central shaft
<style> *{ margin:0; padding:0; } the { 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){ / * By default, all the elements are rotated about the Z axis * / transform:rotateZ(45deg); } ul li:nth-child(2){ / * By default, all elements are spin rotation about the Z axis Y * / transform:rotateX(45deg); } ul li:nth-child(3){ / * By default, all the elements are rotated about the Z axis * / transform:rotateY(45deg); } / * Summary: What you want to rotate around the axis, which axis can then only need to add in the back Rotate * / .......... ....... omitted Code <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>
Third, the source code:
D169_ShapeChangePoint.html
D170_RotateAxialDirection.html
address:
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大数据学习视频礼包