元素transform: rotate()之后,元素宽高该怎么计算?
通常,利用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-top
是100px
,但是上面的结果却是79.289px
,其实浏览器计算的是红色框相对于文档的位置。
transform: rotate(45deg)
是2D旋转,由此也可以联想到3D旋转也可以按相同的套路去计算。
(完)
元素transform: rotate()之后,元素宽高该怎么计算?的更多相关文章
- transform:rotate()将元素进行不同角度的旋转
通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...
- 使用input range滑块,控制元素transform rotate旋转样式
<!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...
- 获取当前元素节点的position和宽高(兼容)
function objxy(n){ var o=document.getElementById(n),x=0,y=0,w=o.offsetWidth,h=o.offsetHeight if(o.ge ...
- 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考
起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...
- 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高
1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...
- 绝对定位元素left、right、top、bottom值与其margin和宽高的关系
绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + le ...
- JavaScript及jQuery中的各种宽高属性图解
文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
- BOM,文档宽高及窗口事件小析
(一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式 ...
- HTML中行内元素与块级元素的区别:
HTML中行内元素与块级元素的区别:在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关:④它可以 ...
随机推荐
- BurpSuite+SQLmap的一种另类扫描
过年之后就忙的团团转.三月开始可以轻松一些,抽空写写最近瞎折腾的东西,本文只是描述工具的一种使用方法,无技术含量.(PS:这种做法,网上也有很多教程,本文只为记录). 由于公司使用的电脑都是win10 ...
- 学习JavaSE 数组
一维数组 基本概念 1.数组中只允许放同一种类型(可以是父子关系). 2.数组即对象. 例: int[ ] arrs={0,1,2};//arrs即一个对象. 3.数组是定长的,不可以增加或者减少. ...
- cocoapods导入三方库头文件找不到问题
问题描述:使用cocoapods时,import 找不到头文件. 问题原因: 1.缓存导致 2.没设置头文件的目录. 1.解决办法: command + k 清理工程 ,找到DerivedData文件 ...
- Scala集合学习总结
遍历集合可以使用迭代器iterator的那套迭代方式.Seq是一个有先后次序的序列,比如数组或列表.IndexedSeq可以通过下标进行任意元素的访问.例如ArrrayBuffer. Set是一组没有 ...
- set方法在set传入值时报空指针异常,直接设置定值即可
这种情况可能跟上下的程序有关,所以直接设置定值传入即可. 例如: re.setRid(ar.getRid()); // 这个是报错代码 md.setConnMailStatusTrue(ar.getR ...
- burpsuite 抓取https 证书问题
一定要按照步骤来,先导入burp初始证书到服务器,这时候初始证书是未验证的,然后导出为crt/cer文件(可能拼写错误,总之是正规证书后缀),再导入到机构. 要代理所有类型包括ssl的才能正常导入机构 ...
- CS100.1x-lab1_word_count_student
这是CS100.1x第一个提交的有意义的作业,自己一遍做下来对PySpark的基本应用应该是可以掌握的.相关ipynb文件见我github. 这次作业的目的如题目一样--word count,作业分成 ...
- HTTPS为什么又快又安全?
一.基础:对称加密和非对称加密 对称加密 通信两端用一样的密钥加解密.如DES.AES. 优点:性能损耗低,速度快: 缺点:密钥存在泄露的可能. 非对称加密 通信两端各自持有对方的公钥及自己的私钥,通 ...
- node.js学习笔记——前序
一.什么是node.js 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一 ...
- python 排序模块 ———— heapq(学习笔记)
from heapq import * def heasort(initi):# 排序 h=[] for value in initi: heappush(h,value)#将每一个item进入hea ...