Tile Animation

5 posts, 0 answers
  1. Mauro
    Mauro avatar
    24 posts
    Member since:
    Apr 2011

    Posted 31 Oct 2011 Link to this post

    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
  2. Valentin.Stoychev
    Valentin.Stoychev avatar
    2198 posts

    Posted 01 Nov 2011 Link to this post

    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!

    the Telerik team

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

  3. DevCraft banner
  4. Rick
    Rick avatar
    1 posts
    Member since:
    Aug 2013

    Posted 22 Aug 2013 Link to this post

    It is a coincidence that i am also looking for some kind of solution like that and i will try now the first suggestion.
  5. Ivo
    Ivo avatar
    90 posts

    Posted 22 Aug 2013 Link to this post

    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!

    Ivailo Dinkov
    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 >>
  6. louiebeck
    louiebeck avatar
    2 posts
    Member since:
    Feb 2016

    Posted 24 Feb Link to this post

    /* 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


Back to Top
DevCraft banner