zoukankan      html  css  js  c++  java
  • 元素transform: rotate()之后,元素宽高该怎么计算?

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

    html

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

    css

    	div {
    		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旋转也可以按相同的套路去计算。

    (完)

  • 相关阅读:
    理解协方差矩阵
    混合高斯模型(Gaussian mixture model, GMM)
    简单理解EM算法Expectation Maximization
    Sigmoid函数与Softmax函数的理解
    关于交叉熵损失函数Cross Entropy Loss
    进制转换 -- 牛客
    首字母大写--牛客
    最简真分数
    剩下的数 -- 牛客
    N的阶乘 -- 牛客
  • 原文地址:https://www.cnblogs.com/xljzlw/p/4963485.html
Copyright © 2011-2022 走看看