javascript - 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');