简单粗暴，直接上重点：  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转换模块-形变中心点的更多相关文章

  1. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  2. CSS学习笔记-2D转换模块

    2D转换模块:    1.旋转        1.1格式:            transform:rotate(45deg);        1.2含义:            表示旋转多少度   ...

  3. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  4. 软件测试之loadrunner学习笔记-02集合点

    loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...

  5. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  6. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  7. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  8. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  9. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

随机推荐

  1. English trip V1 - B 13. Are you a model? 你是模特吗？ Teacher:Patrick Key: 单词回顾、词性后缀

    因为这节课本身内容过于So easy~ Patrick给我补充了很多课外内容 课上内容(Lesson) I doesn't work  2层意思 1) 东西坏了,这个东西不能正常工作了.比如钟不走时间 ...

  2. CSS3实现烟花特效 --web前端

    烟花特效,比较简单,直接贴代码了…… <!DOCTYPE html><html lang="en"><head> <meta charse ...

  3. OSPF - 3，OSPF区域和LSA

    1,四种末端区域骨干区域和标准区域:1,2,3,4,5,包含5类LSA,为了减少某些普通区域的LSA(主要就是4类和5类,有时做绝到连3类也不要了),引入了末梢区域.同时为了确保数据能出去,一般ABR ...

  4. LeetCode--155--最小栈(java版)

    设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的栈. push(x) -- 将元素 x 推入栈中. pop() -- 删除栈顶的元素. top() -- 获取栈顶元素. ...

  5. 动手动脑java异常处理

    1>请阅读并运行AboutException.java示例,然后通过后面的几页PPT了解Java中实现异常处理的基础知识. import javax.swing.*; class AboutEx ...

  6. flex自定义preloader预加载进度条

    flex默认的preloader已经很不错了,可是有时候还是需要自定义的.   需要在要出现自定义预加载的程序的<mx:Application>标签里加入preloader="& ...

  7. SqlSever查询某个表的列名称、说明、备注、注释，类型等

    这周整理了数据库文档,发现用导出脚本来整理表的信息注释查看不方便,因此我就想能不能SQL语句查询表的注释或者表的字段.我就我问朋友是不是可以,他给我点指导,然后自己也在网上百度,来实现自己的想法,我把 ...

  8. spring boot 多数据源配置与使用

    在介绍使用JdbcTemplate和Spring-data-jpa时,都使用了单数据源.在单数据源的情况下,Spring Boot的配置非常简单,只需要在application.properties文 ...

  9. 【MySQL】【4】数据库时间与实际时间相差8小时

    原因:由于默认的是UTC时间,所以在中国有8个小时的时差,需要将serverTimezone的值改为GMT%2B8 spring: datasource: url: jdbc:mysql://172. ...

  10. atom - Emmet插件使用，代码快速填写

    参考转载:http://www.hangge.com/blog/cache/detail_1537.html 用法: 输入:ul>li*6    接着按:tab键 常用语法: 1.后代>: ...