HTML连载68-形变中心点、形变中心轴
2024-09-02 18:40:47
一、 形变中心点介绍
<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="data:image/play_tennis.jpg" alt=""></li> <li><img src="data:image/play_tennis.jpg" alt=""></li> <li><img src="data: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大数据学习视频礼包
最新文章
- 使用 JSONP 实现简单的 SSO 单点登录
- HDInsight - 1,简介
- C++ 生成 dll 和调用 dll 的方法实例(转)
- HDU 1878 欧拉回路
- Team Homework #3 软件工程在北航——IloveSE
- spring事务传播属性与隔离级别
- git and github学习笔记
- read/write数据读写传输方式(转)
- C++ 11 笔记 (二) : for循环
- 理解runtime system
- 转:php页面静态化之真静态
- 【HDOJ】2577 How to Type
- 201621123027 《Java程序设计》第1周学习总结
- Django Form组件 学生管理系统
- iOS开源照片浏览器框架SGPhotoBrowser的设计与实现
- 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果
- 关于iframe页面里的重定向问题
- func_get_args函数
- Redis之发布订阅
- jquery中ajax处理跨域的三大方式
热门文章
- [洛谷P2962] [USACO09NOV] 灯Lights
- 在eclipse中导入源码
- 「 从0到1学习微服务SpringCloud 」12 Zuul的综合使用
- 14、python异常处理及断言
- 20191212模拟赛 问题B
- 缓冲区溢出实例(二)--Linux
- python(从放弃到从头开始)
- Informatica9.5.1配置域名错误(ICMD_10033,INFASETUP_10002,RSVCSHARED_00021)
- Ceph 存储集群-低级运维
- js数组冷知识