CSS 3D变换
CSS 3D变换
提问于 2012-09-22 07:09:09
我正在尝试创建一个3D变换效果，其中一个<div>折叠成一架飞机并飞离屏幕。
为了实现这一点，我现在创建了多个<div>元素-每个折叠一个元素-然后对每个元素应用CSS3D转换，将其转换为纸飞机，然后对整个对象进行关键帧处理，使其飞离屏幕。
问题是我想在div上做同样的事情，在上面有用户输入的文本-本质上我希望div中的文本也能折叠。使用我的方法似乎没有办法做到这一点，因为我将页面拆分为每个文件夹的div……
有没有人知道其他的方法呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-09-22 07:12:19
您可以克隆节点，将其剪切，然后将其克隆成两半，然后继续执行已有的动画。
下面是一个例子：http://jsfiddle.net/rCAA4/
示例HTML：
<div class="box">
<p class="text">
...your text goes here...
</p>
</div>..and 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');Stack Overflow用户
发布于 2012-09-22 07:18:15
您可以将输入文本字段转换为在输入后存储图像的画布。然后，使用javascript对画布进行编程。
我还没试过呢。但是，我想它可能行得通。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12539246
复制相关文章
相似问题
腾讯云开发者
