CSS学习笔记-02. 2D转换模块-形变中心点
简单粗暴，直接上重点： transform-origin
接下来是代码。
首先 勾勒出 3个重叠的div
接着 给3个div分别添加 transform: rotate 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: ;
padding: ;
} ul{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #;
position: relative; } ul li{
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: ;
top: ;
} ul li:nth-child(){
background-color: red; } ul li:nth-child(){
background-color: green; } ul li:nth-child(){
background-color: blue; } </style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: ;
padding: ;
} ul{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #;
position: relative; } ul li{
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: ;
top: ;
} ul li:nth-child(){
background-color: red;
transform: rotate(30deg);
} ul li:nth-child(){
background-color: green;
transform: rotate(50deg);
} ul li:nth-child(){
background-color: blue;
transform: rotate(70deg);
} </style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
效果如下图所示。
默认情况下，所有元素都是以自己的中心点作为参考点来进行旋转。
我们可以通过形变中心点属性来修改它的参考点。
示例：以左上角作为中心点 → transform-origin: 0px 0px;
效果：
以右上角作为中心点：
效果：
CSS学习笔记-02. 2D转换模块-形变中心点的更多相关文章
- CSS学习笔记02 CSS选择器
1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
- CSS学习笔记-2D转换模块
2D转换模块: 1.旋转 1.1格式: transform:rotate(45deg); 1.2含义: 表示旋转多少度 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- 软件测试之loadrunner学习笔记-02集合点
loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
随机推荐
- 安卓中使用OkHttp发送数据请求的两种方式(同、异步的GET、POST) 示例-- Android基础
1.首先看一下最终效果的截图,看看是不是你想要的,这个年代大家都很忙,开门见山很重要! 简要说下,点击不同按钮可以实现通过不同的方式发送OkHttp请求,并返回数据,这里请求的是网页,所以返回的都是些 ...
- 结合canvas和jquery.Jcrop.js裁切图像上传图片
1.引入的外部资源: jquery.Jcrop.css.jquery.Jcrop.js.upimg.js 2.使用的页面元素 @* 选择照片 *@ <div class="line&q ...
- js，vue.js一些方法的总结
push() 可向数组的末尾添加一个或多个元素 pop() 删除并返回数组的最后一个元素 shift()删除并返回数组的第一个元素 unshift() 添加并返回数组的第一个元素 sort()对数组的 ...
- pyqt5安装命令
第一步:安装qt5 pip install pyqt5==5.10.1 -i https://pypi.doubanio.com/simple pip install pyqt5-tools -i h ...
- json加密
有的时候我们为了传参数的URL比较安全,我们一般会用json加密的方法来使自己的URL安全. $a['order_sn'] = $orderNo;$data = json_encode( $a);$d ...
- URL与URI的含义及区别
1.1 什么是URI? 简单点说:URI就是通用资源标志符,不理解是吧,我第一次听说也是不理解. 进一步说:网络上的一些资源(文档.图片.音频.视频.程序等)都是有一些通用资源标识(Universal ...
- NPM版本号
使用NPM下载和发布代码时都会接触到版本号.NPM使用语义版本号来管理代码,这里简单介绍一下. 语义版本号分为X.Y.Z三位,分别代表主版本号.次版本号和补丁版本号.当代码变更时,版本号按以下原则更新 ...
- 使用AdminLTE 在content区，打开相应网页
参考:https://bbs.csdn.net/topics/391846671 问: 比如打开starter.html,然后点击其左边栏的链接(如user.html)的时候,怎么实现在右边的cont ...
- 九、持久层框架（MyBatis）
一.基于MyBatis的对象关系配置(基于XML方式的配置) 注: MyBatis不能像Hibernate那样,在实体类上配置上注解或者配置xml映射文件,系统启动后就可以自动创建表.因为MyBati ...
- oracle in 函数
IN操作符 select * from scott.emp where empno=7369 or empno=7566 or empno=7788 or empno=9999: ...