CSS 3D转换

Question

我正试图创建一个3D转换效果，其中一个<div>折叠成飞机并飞离屏幕。

为了达到这个目的，我现在创建了多个<div>元素 - 每个元素一个 - 然后将CSS 3D转换应用到每个元素上以转换成纸飞机，然后将整个东西键入框架飞离屏幕。

问题是我想对div上的用户输入的文本做同样的事情---基本上我想要div中的文本也可以折叠。似乎没有办法使用我的方法来做到这一点，因为我将页面拆分为每个对象的div ...

任何人都知道有其他方法可以做到这一点吗？

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编写画布。

我从来没有尝试过，但。但是，我认为这可能会奏效。

Text to image on fly with javascript or jquery