简单粗暴，直接上重点：  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. Java接口简单理解

    1.接口: 接口成员变量默认声明方式:public.static.final 接口成员方法默认声明方式:public.abstract public interface Interface_class ...

  2. 20190104xlVBA_在课表里标记自己的课程

    Sub TagMyCourses() Const HEAD_ROW = 3 With ActiveSheet endrow = .Cells.Find("*", .Cells(1, ...

  3. DAG最长路问题 hdu-1224

    用DFS+记忆化写了一下,拓扑排序+DP的我还没弄明白.据说Codeforces 721C就是这类题目,因为有费用限制,DFS不太好写,有时间把DP法想明白来. #include <iostre ...

  4. python2.7 目录下没有scripts

    1.python2.7 配置环境完成或,python目录下没有scripts目录,先下载setuptools,cmd下载该目录下,输入python setup.py install 2.完成后,pyt ...

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

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

  6. Kubernetes DNS 高阶指南（转发别人 解析很详细）

    转发地址:http://www.jintiankansha.me/t/Js1R84GGAl DNS 是 Kubernetes 的核心功能之一,Kubernetes 通过 kube-dns 或  Cor ...

  7. 5月13 jquery的一些应用

    首先对于JavaScript的一些复习:操作内容,操作属性,操作样式 <title>无标题文档</title> <style> #aa { width:200px; ...

  8. 【实战问题】【2】Ambiguous mapping found. Cannot map 'xxController.Create' bean method

    正文: 启动项目时出现该报错. 原因为:在controller中url映射出现重复,@RequestMapping(value = "user/create"). 解决方案为:全局 ...

  9. [CodeForces - 614E] E - Necklace

    E - Necklace Ivan wants to make a necklace as a present to his beloved girl. A necklace is a cyclic ...

  10. 一、I/O操作（流的概念）

    一.流(Stream) 所谓流(Stream),就是一系列的数据. 当不同的介质之间有数据交互的时候,java就会使用流来实现. 数据源可以使文件,还可以是数据库,网络,甚至是其他的程序 不如读取文件 ...