CSS 3D Transforms

Question

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?

Paulo R. · Accepted Answer · 2012-09-21 23:31:12Z

3

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

edited Sep 21, 2012 at 23:31

answered Sep 21, 2012 at 23:12

Paulo R.

15.7k4 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zacropetricopus Over a year ago

Thanks for your answer. I think the overflow:hidden is the key here. In my case, I'll have the fold-divs created already. I just need to add text into all of them with the right margins and set the overflow to be hidden, I guess...

Community · Accepted Answer · 2017-05-23 11:56:16Z

1

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

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Sep 21, 2012 at 23:18

Franz Noel

1,9002 gold badges26 silver badges54 bronze badges

Collectives™ on Stack Overflow

CSS 3D Transforms

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related