最近遇到一个需求，是以前做PHP的同事问我的问题

　   下面是他在百度发的问题截图

　　

　　 根据上面的截图，我稍微梳理了一下

　　问题：现在有个div，旋转45度后，这个div的宽度会动态改变，并且要向右上方偏移

　　需求：现在想要该div旋转45度后，宽度动态改变的同时，不要向右上方偏移

　    注：这个动态添加的宽度理论上不限制，一般限制在0-1000px

　　然后我在处于蒙蔽的状态下思考，寻找解决方法，最后，找到了css3的transform-origin 属性

　　这个属性的意思是：让你更改一个元素变形的原点。我的理解是，可以让你以某个点为圆心旋转

　　虽然这个属性并不能完全解决向右上方偏移的问题，但经过测试，如果在0-1000px的范围里，偏移量是很小的

　

　　

　　demo

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            .son {

                position: fixed;

                width: 100px;

                height: 150px;

                margin-top: 100px;

                border: 5px solid red;

                transform: rotate(45deg);

                transform-origin: 6% 90%;

            }

        </style>

    </head>

    <body>

        <div class="son"></div>

    </body>

</html>

　　注：运行该demo，在谷歌开发者工具中手动调整div宽度，即可看到0-1000px时，偏移的距离

　　补充：据同事讲，他是在做一个标注工具，能够圈图片上一些东西识别，

　　　　　我也没做过，个人觉得该需求不太合理，技术实现上也有一定难度，

　　　　　如果有小伙伴有好的方法，欢迎留言解惑

一个需求认识CSS3 的transform-origin属性的更多相关文章

  1. 用CSS3的transform来做一个立方体

    有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...

  2. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  3. CSS3那些不为人知的高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  4. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  5. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  6. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  7. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  8. 好吧，CSS3 3D transform变换，不过如此！——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  9. css3的transform，translate和transition之间的区别与作用

    transform 和 translate transform的中文翻译是变换.变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是 ...

随机推荐

  1. Ping IP速度范围

    <10 极快...局域网10-50 快. 快速服务器50-100 中.普通服务器.100-300 慢.国外服务器.300-1000 极慢.1000+  很有可能断.

  2. CSS绝对定位的原点：是在border上、padding上还是在content上？

    用了那么久的绝对定位,却一直没在意一个问题,就是绝对定位的原点,究竟是在盒模型的哪一处.今天想到这个问题,直接搜索没有找到标准文档,也没有搜索到相关的问题,于是决定自己动手实现一下看看,并把这个结果发 ...

  3. openTSDB （rpm）安装 + Grafana 视图

    1.提前安装环境 操作系统:CentOS OpenTSDB版本:2.0.1 JDK版本:1.8.1_101 Apache HBase版本:1.1.2 2.安装Grafana yum安装grafana ...

  4. Tomcat 500error: Could not initialize class

    Web 项目报错Could not initialize class ,出现500,说明服务器是起来了,可能是这个类的驱动有问题,缺少初始化需要的文件 查到有相关情况: 考虑是jar 包的问题,检查了 ...

  5. 【Selenium】【BugList5】chrom窗口未关闭，又新开窗口，报错：[8564:8632:0522/111825.341:ERROR:persistent_memory_allocator.cc(845)] Corruption detected in shared-memory segment.

    环境信息:Windows7 64位 + python 3.6.5 + selenium 3.11.0 +pyCharm 解决方法: 执行 driver = webdriver.Chrome()前必须把 ...

  6. docker私库Harbor部署（转载）

    系统环境 centos7.3docker-ce docker version: 18.03.0docker-compose version: 1.21.0 Install Docker CE 安装依赖 ...

  7. Mac OS mysql数据库安装与初始化

    一.官网下载mysql 二.安装并启用 三.数据库初始化 192:bin zhuyajing$ ./mysql -u root -p Enter password: Welcome to the My ...

  8. 在datasnap 中使用unidac 访问数据（客户端）

    前面我们讲了如何使用unidac 在datasnap 的服务端访问数据库,今天大概讲一下客户端如何访问 前面做的服务器?其实这个客户端适合任何datasnap 服务端. 首先我们建一个应用,并加入一个 ...

  9. Newtonsoft.Json 时间格式化

    时间序列化经常多个T:“2017-01-23T00:00:00” 解决方案: 日期格式化输出,指定IsoDateTimeConverter的DateTimeFormat即可 IsoDateTimeCo ...

  10. Atcoder Beginner Contest 115 D Christmas 模拟,递归 B

    D - Christmas Time limit : 2sec / Memory limit : 1024MB Score : 400 points Problem Statement In some ...