CODEWITHSUNDEEP
javascriptcsscss-transformscss-animations
zacropetricopus
zacropetricopus

Reputation: 407

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?

Upvotes: 2

Views: 932

Answers (2)

Paulo R.
Paulo R.

Reputation: 15609

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

Upvotes: 3

Franz Noel
Franz Noel

Reputation: 1880

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

Upvotes: 1

Related Questions