一个需求认识CSS3 的transform-origin属性
最近遇到一个需求,是以前做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属性的更多相关文章
- 用CSS3的transform来做一个立方体
有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...
- CSS3中transform几个属性值的注意点
transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...
- CSS3那些不为人知的高级属性
尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...
- 好吧,CSS3 3D transform变换,不过如此!
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- CSS3 2D Transform
在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...
- CSS3 3D Transform
CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
- 好吧,CSS3 3D transform变换,不过如此!——张鑫旭
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- css3的transform,translate和transition之间的区别与作用
transform 和 translate transform的中文翻译是变换.变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是 ...
随机推荐
- svn如何根据提交日志信息回退版本
问题场景: 1 记得提交的日志信息中包含openssl,但是不记得这次提交的版本号revesion,是svn初始化后中间的某次提交: 2 svn环境的操作系统平台为Fedora, 即命令行下:而且sv ...
- 20172306 2018-2019-2 《Java程序设计与数据结构》第七周学习总结
20172306 2018-2019-2 <Java程序设计与数据结构>第七周学习总结 教材学习内容总结 概述 二叉查找树是一种含有附加属性的二叉树,即其左孩子小于父结点,而父结点又小于或 ...
- Python_操作邮箱
脚本: from win32com.client import Dispatchimport datetime as dateimport datetimeimport reimport win32c ...
- 关于签名sign的坑
在有些支付文档或其他文档都会要求签名验证 /** * description:签名 * function name:sign * @param $data * @return string */fun ...
- HTTP协议之url详解
HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接.URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息 URL,全称是U ...
- 安装mq的时候,计算机用户名是中文名的解决办法
在windows下安装rabbitMq ,如果使用用户名是中文的,则会出现启动失败的情况.关于这一点下边给出终极解决方案. 1. 假如你的中文用户名是 XXXXXX,为用户目录建立软链接,软连接名称为 ...
- mysql 主从库同步
#主库修改my.ini [mysqld] server log-bin=mysql-bin binlog-do-db=demo #从库修改my.ini [mysqld] server replicat ...
- CodeForces - 939A,解题报告
题意:给出一个n个点有向图,问是否存在三个点,这三个点构成一个回路.n<=5000 模拟即可. 注意是必须三个点 多了居然不行. import java.util.*; public class ...
- Mac更改PHP默认目录
在Mac上搭建了PHP服务器以后,默认的路径为/Library/WebServer/Documents下面,但这让人很不爽,我想修改到自己定义的路径下.经过好一番折腾,终于成功了. PHPEclips ...
- spring aop 的代理工厂
参考 https://docs.spring.io/spring/docs/4.3.11.RELEASE/spring-framework-reference/htmlsingle/#aop-unde ...