WordPress.org

Support

Support » Themes and Templates » Omega » [Resolved] css3 animation

[Resolved] css3 animation

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    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

    thanx..but little more..

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    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”

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] css3 animation’ is closed to new replies.
Skip to toolbar