如何计算图形大小

Question

在html中我有两个数字，内部用css-transform / matrix转换 但它的尺寸保持不变 我需要用虚线计算图的尺寸

原始图形宽度为300px，高度为150px，变换矩阵为（0.8，-0.6,0.6,0.8,0,0）或角度为〜-37°

虚线图的尺寸为336 x 304

html如何使外图正确包裹变形的内图？它应该像图片一样。

HTML

<div style="
    position: absolute;
    top: 130px;
    left: 130px;
    border: 1px dotted #000;
">
    <div style="
    -webkit-transform: matrix(0.8, -0.6, 0.6, 0.8, 0, 0);
    border: 1px solid #000;
    width: 300px;
    height: 150px;
"></div>
</div>

如果它可以被包裹，我可以简单地计算它的尺寸。

或

[math]如何用虚线计算图的正确尺寸？

Answer 1

试试这个：

<div style="
    position: absolute;
    width:334px;height:302px;
    border: 1px dotted #000;
">
    <div style="
        transform:rotate(-37deg);
        top:75px;left:16px;position:relative;
        border: 1px solid #000;
        width: 300px;
        height: 150px;
    ">
    </div>
</div>

小提琴： http://jsfiddle.net/nu3m8/2/

宣读transform:rotate http://www.css3files.com/transform/和https://developer.mozilla.org/en-US/docs/CSS/transform