css - 一个div进行旋转或缩放后，怎么获取它变形后的宽高？比如：-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - 一个div进行旋转或缩放后，怎么获取它变形后的宽高？比如：

PHP中文网 2017-04-17 13:29:05

[HTML讨论组]

1421

width: 100px;height: 100px;
transform-origin: 0 0;
transform: rotateZ(45deg);

}
这个p旋转了45度之后，怎么去获取它的宽与高？就是它旋转之后所占的空间

PHP中文网

认证0级讲师

全部回复(4)

伊谢尔伦2017-04-17 13:31:05 4楼

  var test = document.querySelector('#test');
    var rect = test.getBoundingClientRect();
    alert('width:' + rect.width + 'height:' + rect.height);

试过很多种办法，只有这种办法有效了，我也长见识了

赞 +0

添加回复

迷茫2017-04-17 13:31:05 3楼

//获得视觉上的宽, 高... 原答案直接用了长宽一样的模型, 导致结果出错了

//1.获得原始宽, 高
var el = document.getElementById('box'),
    h = el.offsetHeight,
    w = el.offsetWidth;
    
//2.获得旋转角度
//matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)
var transform = window.getComputedStyle(el)['transform'],
    rotate = transform.slice(7, -1).split(',');

//3.计算宽度, 高度
var lastH = h * rotate[0] + w * rotate[1],   //h * sinθ + w * cosθ
    lastW = h * rotate[1] + w * rotate[0];   //h * cosθ + w * sinθ