CSS 3D Transforms

I'm trying to create a 3D transform effect where a <div> folds into an airplane and flies off the screen.

To achieve this, I'm now creating multiple <div> elements - one for each fold - and then applying CSS 3D transformations to each one to transform into a paper airplane and then key-framing the whole thing to fly off the screen.

The issue is that I want to do the same on a div with user-inputted text on it --- essentially I want the text in the div to fold too. There doesn't seem to be a way to do it using my method, because I'm splitting the page into divs for each fold...

Anyone know of any other way to do this?

Answers


You could clone the node, cut it, and the clone, in half and then continue with the animations you're already doing.

Here's an example: http://jsfiddle.net/rCAA4/

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

You can probably convert the input text field to a canvas that stores the image after input. Then, program the canvas with javascript.

I never tried it, yet. But, I think it might work.

Text to image on fly with javascript or jquery


Need Your Help

What's the convention for java package names without a domain association?

java android naming-conventions package conventions

I can't find a Q/A on SO that answers my exact question, so I figure I'd post it and see what comes back.

How to programatically install a Root CA certificate on a Windows phone?

windows-phone-7 mobile ssl certificate

How to programatically install a Root CA certificate on a Windows phone? This question is analogous to this one:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.