html - 如何计算图形大小

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>

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

或者

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

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