This is a migrated thread and some comments may be shown as answers.

Tile Animation

4 Answers 80 Views
Animation
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Mauro
Top achievements
Rank 1
Mauro asked on 31 Oct 2011, 11:26 AM
Hi, I'm looking to try to animate an element so that it flips over like the tiles on the start screen. Do you know how I could do this?

Update: I see that you you guys have the page transitions, which is kind of what I want...can that be applied to a single UI Element?

Thanks very much

4 Answers, 1 is accepted

Sort by
0
Valentin.Stoychev
Telerik team
answered on 01 Nov 2011, 09:18 AM
Hi Mauro,

Yes - you can use the page transitions to do this. Check the page transitions sample in the examples solution that comes with your download.

Please let us know if you need any more help!

Greetings,
Valentin.Stoychev
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Rick
Top achievements
Rank 1
answered on 22 Aug 2013, 09:56 AM
It is a coincidence that i am also looking for some kind of solution like that and i will try now the first suggestion.
0
Ivo
Telerik team
answered on 22 Aug 2013, 11:31 AM
Hi Rick,
Please, follow the Valentin's advice- check the page transitions sample in the examples solution that comes with your download and let us know if you need any more help or if you have any additional questions and/or comments!

Regards,
Ivailo Dinkov
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
louiebeck
Top achievements
Rank 2
answered on 24 Feb 2016, 09:29 AM

/* Effect 4: fall perspective */
.grid.effect-4 {
    perspective: 1300px;
}

.grid.effect-4 li {
    transform-style: preserve-3d;
}

.grid.effect-4 li.animate {
    transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    animation: fallPerspective .8s ease-in-out forwards;
}

@keyframes fallPerspective {
    100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

 

Hope it would be helps you , Thanks ,

else for more animation information check my web here The Cheesy Animation Factory - Architectural 3D Flythrough

 

Tags
Animation
Asked by
Mauro
Top achievements
Rank 1
Answers by
Valentin.Stoychev
Telerik team
Rick
Top achievements
Rank 1
Ivo
Telerik team
louiebeck
Top achievements
Rank 2
Share this question
or