Support » Theme: Omega » css3 animation

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


    Forum moderator

    Add to your custom image, name, etc.:

    -webkit-transform: rotateY(30deg);

    Then on hover add:

    -webkit-transform: rotateY(0deg);

    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


    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:

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

    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 ‘css3 animation’ is closed to new replies.