简单粗暴，直接上重点：  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. LeetCode--437--路径总和3

    问题描述: 给定一个二叉树,它的每个结点都存放着一个整数值. 找出路径和等于给定数值的路径总数. 路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点). 二 ...

  2. mysql 时间戳转换 、cnd、dns 通俗理解

  3. New Roads CodeForces - 746G (树,构造)

    大意:构造n结点树, 高度$i$的结点有$a_i$个, 且叶子有k个. 先确定主链, 然后贪心放其余节点. #include <iostream> #include <algorit ...

  4. HTTP请求/响应报文结构

    HTTP协议版本有两种:HTTP1.0和HTTP1.1 它们俩的区别在于:HTTP1.0对于每个连接都只能传送一个请求和响应,请求后就会关闭,HTTP1.0没有Host字段:而HTTP1.1在同一个连 ...

  5. python-django缓存

    三 Django的缓存机制 1.1 缓存介绍 1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的 ...

  6. json 常用的序列化 反序列化对象 代码

    序列化对象: ---------------------------------------------------------- Person p = new Person() { Name = & ...

  7. 解决gitHub下载速度慢的问题

    转载:http://blog.csdn.net/x_studying/article/details/72588324 github被某个CDN被伟大的墙屏蔽所致. 解决方法: 1.访问http:// ...

  8. anglar cli的 rxjs_1.of is not a function

    按照官网敲例子遇到 rxjs_1.of is not a function import { Observable,of } from 'rxjs'; 改为 import { Observable} ...

  9. ajax常见的面试问题

    1:什么是ajax?ajax作用是什么? 异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术. ajax用来与后台交互 2:原生js ajax请求有几个步骤?分别是什么 / ...

  10. CAFFE 调试

    在Make.config 文件里将DEBUG=1的注释去掉,再make.可以用IDE如eclipse来import makefile工程.必要时按照IDE的提示将源文件cpp和对应的bin文件对应.