Title: css3 animation
Last modified: August 21, 2016

---

# css3 animation

 *  Resolved [new developer](https://wordpress.org/support/users/new-developer/)
 * (@new-developer)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/css3-animation-1/)
 * how add [this](http://demo.marcofolio.net/3d_animation_css3/) animation in my
   page with my custom image,name etc

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/css3-animation-1/#post-5020330)
 * 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](http://davidwalsh.name/css-transform-rotate)_
 *  Thread Starter [new developer](https://wordpress.org/support/users/new-developer/)
 * (@new-developer)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/css3-animation-1/#post-5020428)
 * thanx..but little more..
 * i want add this effect only for one page image or specified image..
    can you 
   tell me how..
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/css3-animation-1/#post-5020439)
 * View the source of your page and you’ll see a unique class in the `<body>` element
   to that page
 *  Thread Starter [new developer](https://wordpress.org/support/users/new-developer/)
 * (@new-developer)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/css3-animation-1/#post-5020446)
 * 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”
 *  [miranto](https://wordpress.org/support/users/miranto/)
 * (@miranto)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/css3-animation-1/#post-5020601)
 * 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 ‘css3 animation’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/omega/1.3.0/screenshot.png)
 * Omega
 * [Support Threads](https://wordpress.org/support/theme/omega/)
 * [Active Topics](https://wordpress.org/support/theme/omega/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/omega/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/omega/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [miranto](https://wordpress.org/support/users/miranto/)
 * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/css3-animation-1/#post-5020601)
 * Status: resolved