CSS 3D變形

Question

我正在嘗試創建3D變換效果，其中<div>折疊成飛機並飛離屏幕。

為了實現這一點，我現在創建多個<div>元素-每折疊一個-然后對每個元素應用CSS 3D轉換以轉換為紙飛機，然后對整個幀進行關鍵幀設計以使其飛離屏幕。

問題是我想在具有用戶輸入文本的div上執行相同的操作---本質上，我也希望div中的文本也可以折疊。 似乎沒有辦法使用我的方法來執行此操作，因為我將頁面的每一折都分成了divs ...

有人知道其他方法嗎？

Answer 1

您可以克隆節點，將其剪切，然后再克隆，將其對半，然后繼續執行已經在做的動畫。

這是一個示例： http : //jsfiddle.net/rCAA4/

HTML示例：

<div class="box">
    <p class="text">
       ...your text goes here...
    </p>
</div>

..和javascript（jQuery）：

var $box = $('.box'),
    $text = $('.text'),
    width_of_$box = $box.css('width'),
    half_width_of_$box = parseInt(width_of_$box)/2 + "px";

$text.css('width', width_of_$box);

$box.css({
    'width': half_width_of_$box,
    'overflow': 'hidden'
});

$box
    .clone()
    .find('.text')
        .css('margin-left', "-" + half_width_of_$box)
    .end().appendTo('body');

Answer 2

您可能可以將輸入文本字段轉換為在輸入后存儲圖像的畫布。 然后，使用javascript編寫畫布。

我還沒有嘗試過。 但是，我認為這可能有效。

使用javascript或jquery即時生成文本到圖像