2

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

为了实现这一点，我现在创建了多个<div>元素 - 每个折叠一个 - 然后对每个元素应用 CSS 3D 转换以转换成纸飞机，然后对整个事物进行关键帧处理以飞出屏幕。

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

任何人都知道任何其他方式来做到这一点？

4

2 回答 2

3

您可以克隆节点，将其剪切，然后将其克隆成两半，然后继续您已经在做的动画。

这是一个例子：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');
于 2012-09-21T23:12:19.083 回答
1

您可能可以将输入文本字段转换为输入后存储图像的画布。然后，使用 javascript 对画布进行编程。

我还没有尝试过。但是，我认为它可能会起作用。

使用 javascript 或 jquery 即时将文本转换为图像

于 2012-09-21T23:18:14.670 回答