www.webdeveloper.com
Results 1 to 3 of 3

Thread: Css 3-d flip

  1. #1
    Join Date
    Jun 2014
    Posts
    3

    Css 3-d flip

    How to flip div using CSS 3-D transformation and transitions without using jquery/javascript?

    If you are looking for something like this you are at right place, this is kind of a tutorial to do CSS 3-D flip.Okay lets get started with our HTML code.

    Code:
    <section class="container" >
      <div id="card">
        <figure class="front"></figure>
        <figure class="back face"></figure>
      </div>
    </section>
    Figure: Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.



    Now lets start styling our HTML in CSS.

    Code:
    .container {
       width: 259px;
       height: 350px;
       position: relative;
       margin: 10px auto 40px;
       -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
         }
    To activate 3-D space, an element needs perspective. The value of perspective determines the intensity of the 3-D effect. Think of it as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect.perspective: 2000; yields a subtle 3-D effect, as if we were viewing an object from far away.perspective: 100; produces a tremendous 3-D effect, like a tiny insect viewing a massive object.
    Last edited by jedaisoul; 07-02-2014 at 03:17 PM. Reason: link removed - no spam please

  2. #2
    Join Date
    Apr 2014
    Location
    Burnley uk
    Posts
    68
    Really nice. keep it up dude

  3. #3
    Join Date
    Jun 2014
    Posts
    3
    Quote Originally Posted by drwebsitesuk View Post
    Really nice. keep it up dude
    Thank you

    I have completed this article in hours with a lot of effort, you have to just click a button to get updated with more such articles in future.Like our facebook page.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles