WordPress.org

Forums

Omega
[resolved] css3 animation (6 posts)

  1. new developer
    Member
    Posted 9 months ago #

    how add this animation in my page with my custom image,name etc

  2. Andrew
    Forum moderator
    Posted 9 months ago #

    Add to your custom image, name, etc.:

    -webkit-transform: rotateY(30deg);

    Then on hover add:

    -webkit-transform: rotateY(0deg);

    http://davidwalsh.name/css-transform-rotate

  3. new developer
    Member
    Posted 9 months ago #

    thanx..but little more..

    i want add this effect only for one page image or specified image..
    can you tell me how..

  4. Andrew
    Forum moderator
    Posted 9 months ago #

    View the source of your page and you'll see a unique class in the <body> element to that page

  5. new developer
    Member
    Posted 9 months ago #

    sorry cant understand..
    something like this??!!----------->>>>> "wordpress ltr en en-us parent-theme y2014 m06 d18 h13 wednesday logged-out plural home blog layout-2c-l"

  6. miranto
    Member
    Posted 7 months ago #

    your image inside the body will be like example:

    <body>
     <ul id="effect">
    <li>
       <img src="your_image.jpg" />
      </li>
    </body>

    the "effect" is a css id in which you specify your css properties and values.
    you will have in your css file:

    #effect { list-style:none; margin:100px 0; height:550px; }
    #effect li { display:inline; float:left; -webkit-perspective: 500; -webkit-transform-style: preserve-3d; -webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }
    #effect li:hover { -webkit-perspective: 5000; }
    #effect li img { border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);	-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888; -webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
    #effect li:hover img { -webkit-transform: rotateY(0deg); }

    After you do that you will have a nice rotation effect.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.