简单粗暴，直接上重点：  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. 第十二周（MySort）

    注意:研究sort的其他功能,要能改的动代码,需要答辩 模拟实现Linux下Sort -t : -k 2的功能. 要有伪代码,产品代码,测试代码(注意测试用例的设计) 参考 Sort的实现.提交博客链 ...

  2. 20171205xlVBA往返航班组合

    'ClassPlan Public Org As String Public Des As String Public FlyNo As String Public StartDate As Vari ...

  3. Vue.js的后端数据支持：使用Express建立app, 并使用MongoDB数据库。

    需要用到的backed tech stack: Node: JavaScript on the server/backend. That's basically what it is, but mor ...

  4. PAT 1023 Have Fun with Numbers

    1023 Have Fun with Numbers (20 分)   Notice that the number 123456789 is a 9-digit number consisting ...

  5. 厉害了WORD大S

    REPORT YLYTEST01. ) TYPE C VALUE 'ABC'. WRITE LV_C TO LV_C RIGHT-JUSTIFIED. '. WRITE LV_C. 结果: 另外收藏一 ...

  6. 网页定位点击事件js响应函数教程（Chrome）

    一.背景说明 在前端页面调试或者渗透测试(尤其是XSS)时,我们经常想定位js函数位置:比如点击了某个位置弹出了一个对话框,这是哪个文件的哪个js函数在响应. 本文以Chrome浏览器定位点击事件响应 ...

  7. PHP配置方法

    由于php是一个zip文件(非install版),安装较为简单,解压就行.把解压的 php5.2.1-Win32重命名为 php5.并复制到C盘目录下.即安装路径为 c:\php5 1 找到php目录 ...

  8. 锚点 , angular 锚点 vue锚点

    因为最近在开发angular,自己有路由 用window.location跳到默认路由,查了半天用angular方式不好解决 ,so 原生走起 START scrollIntoView是一个与页面(容 ...

  9. 在vue项目中使用sass

    如果想开发移动端项目,那么适配的时候sass必不可缺,但是 npm  安装sass时候总是报错失败! 研究半天发现可以解决的方法,亲测有效 1.先换成淘宝镜像再安装 npm install -g cn ...

  10. China’s movie heroes 《红海行动》展现中国英雄本色

    Recent years have seen a trend for big military movies. Whether it was last year’s British hit Dunki ...