CODEWITHSUNDEEP
csscss-transitions
basilkot
basilkot

Reputation: 592

javascript library for 3d transformations

I've created the sample for 3d-transformations in browser:

<div id="wrapper">
    <div id="cube">
        <div id="top">TOP</div>
        <div id="front">FRONT</div>
    </div>
</div>

And css:

#cube div{ 
    -webkit-transform-origin:50% 50% -150px;
    -webkit-transition: -webkit-transform .3s linear; 
    border:1px solid black;
}
#cube:hover #top{
    -webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0);
}
#cube:hover #front{
    -webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,-90deg);
}
#cube #top{ 
    -webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,90deg);
}
#cube #front{ 
    -webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0);
}

You can see this sample here.

But for now it works for chrome only and i want to make it more crossbrowserly. Can anybody suggest some javascript-library for 3d-transformations? Is there a way to transform images and text?

Upvotes: 0

Views: 956

Answers (2)

Dobrobot
Dobrobot

Reputation: 1

As you can see "transit.js" you've mentioned provide 2d transformations which is not so fast as 3d (because of GPU support for translate3d(...) instead of translate(..))

Proof

Original image url - http://pix.academ.org/img/2015/05/21/64bcd912c0851604977d73c7d1f82778.png

Upvotes: 0

user1999510
user1999510

Reputation:

Here a plugin for css3 effects

Effects

and kindly read this as note: Note(othr brwsers)

Upvotes: 1

Related Questions