0

HTMLには2つの図があり、内側は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>

ラップできる場合は、寸法を簡単に計算できます。

また

[数学] 点線の図形の正しい寸法を計算するにはどうすればよいですか?

4

1 に答える 1

0

これを試して：

<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を参照してください。

于 2013-03-25T08:03:27.583 に答える