通常,利用transform: rotate()元素之后,我们并不会去在意元素大小的变化,因为看上去并没有什么变化。虽然看上去没有变化,其实是有变化的。下面用一个例子来说明一下。

html

	<div id="rect"></div>

css

	div {
width:100px;
height:100px;
margin: 100px auto;
background:red;
transform: rotate(45deg);
}

效果如下:

图中四边形的宽高都是100px,然后旋转了45度,当用浏览器查看它的宽高时就变成了141.421px。浏览器是怎么计算的呢?简单画了一个草图。

旋转之后,元素的大小其实就变成了红色框的大小,很容易可以计算得到红色框的宽高为141.421px

注意:当你用js获取元素的宽度时,返回的还是100px,因为css设置的宽度是100px,js获取的是css的值。

旋转之后的元素,不仅大小变化了,元素的位置也变了:

	$("#rect").offset()

上面代码输出:

	Object {top: 79.28932189941406, left: 404.289306640625}

css设置的margin-top100px,但是上面的结果却是79.289px,其实浏览器计算的是红色框相对于文档的位置。

transform: rotate(45deg)是2D旋转,由此也可以联想到3D旋转也可以按相同的套路去计算。

(完)

元素transform: rotate()之后,元素宽高该怎么计算?的更多相关文章

  1. transform:rotate()将元素进行不同角度的旋转

    通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...

  2. 使用input range滑块,控制元素transform rotate旋转样式

    <!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...

  3. 获取当前元素节点的position和宽高(兼容)

    function objxy(n){ var o=document.getElementById(n),x=0,y=0,w=o.offsetWidth,h=o.offsetHeight if(o.ge ...

  4. 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

    起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...

  5. 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

    1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...

  6. 绝对定位元素left、right、top、bottom值与其margin和宽高的关系

    绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + le ...

  7. JavaScript及jQuery中的各种宽高属性图解

    文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”.   作者声明:本 ...

  8. BOM,文档宽高及窗口事件小析

    (一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式 ...

  9. HTML中行内元素与块级元素的区别:

    HTML中行内元素与块级元素的区别:在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关:④它可以 ...

随机推荐

  1. Python2图像文本识别

    原文地址:http://www.cnblogs.com/tanghuang/p/6380588.html 适用版本:python2以下 将图片中的数字通过 pytesseract.image_to_s ...

  2. [转]SVN服务器搭建和使用(一)

    Location是指VisualSVN Server的安装目录,Repositorys是指定你的版本库目录.Server Port指定一个端口,Use secure connection勾山表示使用安 ...

  3. 【转】tomcat搭建本地服务器 实现apk更新下载

    转自:http://www.kankanews.com/ICkengine/archives/121748.shtml 做apk的更新下载功能,测试的时候需要个服务器. 所以就选用 Apache To ...

  4. 对cordova打包的apk文件进行签名

    可用于没有签名和已经签名的apk,再次签名. jarsigner -verbose -keystore [keystorePath] -signedjar [apkOut] [apkin] [alia ...

  5. Splay普及版

    辣么,我要介绍我自学的\(Splay\)了,虽然跟大佬们讲得会有些重复,但是自认为把一些玄妙的东西点出来了\(qwq\) \(0x01\) 引言 首先,我并没觉得\(Splay\)有多难--代码长的原 ...

  6. NYOJ 44 字串和 (最大字串和 线性dp)

    题目链接: http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=44 子串和 时间限制:5000 ms  |  内存限制:65535 KB 难度:3 ...

  7. java中跳出循环的方式

    continue:跳出本次循环,继续下一次循环,也就是不执行本次循环continue下面的语句. 例如:"will you"不会被打印 for(int i = 0; i< 8 ...

  8. 数据库分库分表和带来的唯一ID、分页查询问题的解决

    需求缘起(用一个公司的发展作为背景) 1.还是个小公司的时候,注册用户就20w,每天活跃用户1w,每天最大单表数据量就1000,然后高峰期每秒并发请求最多就10,此时一个16核32G的服务器,每秒请求 ...

  9. 解决安装macports更新失败问题

       安装 macports 先是卡在开始,xcode的路径指定错误,重新指定一下,然后再sudo port selfupdate,就卡再ports.tar那里不动了.经过google和百度查到参考网 ...

  10. Objective-C(生命周期)

    视图控制器生命周期 : 1)当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序 1.alloc 创建对象,分配空间 2.init(initWithNibName) 初始化对象,初始化数据 ...