Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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..
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
