I am rotating my images when hovered and I want the transition to be smooth so this is what I tried:
<div class="latest-thumbs">
<img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
<img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
<img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
</div><!-- end latest-thumbs -->
CSS:
.rotate {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: 300ms ease all;
-moz-transition: 300ms ease all;
-o-transition: 300ms ease all;
transition: 300ms ease all;
}
.rotate:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
My images rotate when hovered, so there is no problem there, only, the transition is not smooth. Any ideas on how to fix this?
JSFiddle: http://jsfiddle.net/wntX4/
change all your transition css property (replace ease with linear)
transition: 300ms ease all;
with
transition: 300ms linear all;
refer this
Update
your transition is only for opacity property that is working in the right way
Try using transform: translate (and of course browser-specific prefixes). This article is pretty helpful.
I have just changed this in your fiddle and it works:
.rotate:hover {
transform: rotate(0deg) translate(50%);
-moz-transform: rotate(0deg) translate(50%);
-webkit-transform: rotate(0deg) translate(50%);
-o-transform: rotate(0deg) translate(50%);
-ms-transform: rotate(0deg) translate(50%);
-khtml-transform: rotate(0deg) translate(50%);
transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
-khtml-transition: all 2s ease;
}
I think that browser was firing 2 hovers at once. It's 1 year old but someong might fail into this again.
Related
Can someone please tell me why my icon just moves to the right when it's supposed to rotate?
.rotate-icon{
display: inline-block;
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
-transition: -transform 0.6s ease-out;
}
.rotate-icon:hover{
display: inline-block;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-transform: rotate(-360deg);
}
img{
position:absolute;
top: 95vh;
left:10%;
transform: translate(-50%, -50%);
}
JSfiddle
Since I am quite new to HTML I can't get it why I doesn't rotate even it should.
My goal is to get a icon on the lower left icon which rotates on hover.
Thanks for your answers.
You can't use this:
transform: translate(-50%, -50%);
It's override this: -transform: rotate(-360deg); so you doesn't have good position element.
You should move transform: translate(-50%, -50%); to parent element if you want rotate your element as you write in your question.
Your are applying two transition on single item, which ins't letting rotate work,
remove
transform: translate(-50%, -50%); from img style rule, and it works like you would expect.
Here is a fiddle for you
You're overwriting translate() when you redefine transform with rotate() on hover. Combine those two transform properties and set an initial rotate() to transition from.
.rotate-icon{
display: inline-block;
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
.rotate-icon:hover{
display: inline-block;
-webkit-transform: translate(-50%, -50%) rotate(-360deg);
-moz-transform: translate(-50%, -50%) rotate(-360deg);
transform: translate(-50%, -50%) rotate(-360deg);
}
img{
position:absolute;
top: 95vh;
left:10%;
transform: translate(-50%, -50%) rotate(0deg) ;
}
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2149-200.png" class="rotate-icon">
I'm using transform: rotate(-2deg); on a section. When the user hovers over the section, it changes in size using transform: scale(1.1);.
There's one page on my site where I'd like to maintain the rotation, but not the scale when the user hovers over the section. Is there a way to reset transform: scale(1.1); without resetting transform: rotate(-2deg);?
Here's the code in full:
section {
display: block;
width: 100px;
height: 100px;
padding: 10px;
background: red;
/* Rotate */
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
/* Easing */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
section:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.some-page section:hover {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
Fiddle here.
You could just set the original transform value back again on the hover selector like given below:
.some-page section:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
This would make sure that the rotation stays at -2 degree but the scale would not happen as this selector is more specific and would take precedence over the other generic hover selector.
section {
display: block;
width: 100px;
height: 100px;
padding: 10px;
background: red;
/* Rotate */
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
/* Easing */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
section:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.some-page section:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
/* Just for demo */
section {
margin: 10px;
}
<section>I'm some content</section>
<div class="some-page">
<section>I'm some content</section>
</div>
i have a 45 deg rotated div. i am trying on hover to rotate it around its y-axis by using css3 perspective. it dont hover like i want and it becomes a square when hovered. i would like to maintain rotated 45 deg at the end of the animation.
here is my code:
<div class="perspective">
<a href="#" class="box">
<div class="innerbox">
text
</div>
</a>
</div>
.perspective
{
position:relative;
width:100px;
height:100px;
margin:200px 0px 0px 200px;
-moz-perspective: 300px;
-webkit-perspective: 300px;
-o-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
}
.box
{
width:80px;
height:80px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
border: 5px solid #000;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
.innerbox
{
margin:30px 0px 0px 20px;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.box:hover
{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
i made an example http://jsfiddle.net/o6mo0rjq/
You've initially rotated .box by 45 degrees around the Z-axis. When you specify a new transform, this initial rotation is overwritten - so for the new rotation on :hover, you should also specify the original rotation. Your block declaration would then become:
.box:hover {
-moz-transform: rotateY(180deg) rotateZ(45deg);
-webkit-transform: rotateY(180deg) rotateZ(45deg);
-o-transform: rotateY(180deg) rotateZ(45deg);
-ms-transform: rotateY(180deg) rotateZ(45deg);
transform: rotateY(180deg) rotateZ(45deg);
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
Here's a JSFiddle to demonstrate. (Note: The order in transform matters! Because that dictates the order in which the rotations are applied to the element, which may give you different results depending on the transformations you're applying.)
Hope this helps! Let me know if you have any questions.
I have a problem with CSS transition and transformation in Safari
.class li{
background:#ffffff;
padding:30px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: absolute;
transform: translate(-300px, 0px);
-webkit-transform: translate(-300px, 0px);
-moz-transform: translate(-300px, 0px);
-o-transform: translate(-300px, 0px);
-ms-transform: translate(-300px, 0px);
width:165px;
color:#151c2d;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
.class li.active{
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
}
Everything works fine in Chrome, Firefox, IE but not in Safari.
In Safari we only change the content like display: none and display: block, in other browsers it slides from left to right on action (I change in javascript class for active element).
Do you have idea whats going on?
I have the following styling:
#logo-wrapper{
width: 397px;
height: 190px;
float: left;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transition: width 1.2s ease-in-out;
-moz-transition: width 1.2s ease-in-out;
-ms-transition: width 1.2s ease-in-out;
-o-transition: width 1.2s ease-in-out;
transition: width 1.2s ease-in-out;
}
#logo{
}
and my HTML looks like this:
<div id="logo-wrapper">
<div id="logo">
<img src="images/logo.jpg" alt="Logo" />
</div>
</div>
The webkit styling of the parent div (logo-wrapper) is making the image inside the child div (logo) angled!
Is there a way to remove the angle effect from the child div so that the logo image displays normally?
Thanks
You can apply that transform on some pseudo-element avoiding the entire element try this:
#logo-wrapper{
width: 397px;
height: 190px;
float: left;
position:relative;
}
#logo-wrapper:after {
content:" ";
display:block;
position:absolute;
z-index:-1;
top:0;bottom:0;left:0;right:0;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transition: width 1.2s ease-in-out;
-moz-transition: width 1.2s ease-in-out;
-ms-transition: width 1.2s ease-in-out;
-o-transition: width 1.2s ease-in-out;
transition: width 1.2s ease-in-out;
}
With this you avoid reverse the effect on each element inside and is better if you want to make some change.
You could try:
#logo {
-webkit-transform: skewX(+20deg);
-moz-transform: skewX(+20deg);
-ms-transform: skewX(+20deg);
-o-transform: skewX(+20deg);
transform: skewX(+20deg);
}
Here is a fiddle
You just need to reverse the skew on the image
#logo-wrapper {
width: 397px;
height: 190px;
float: left;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transition: width 1.2s ease-in-out;
-moz-transition: width 1.2s ease-in-out;
-ms-transition: width 1.2s ease-in-out;
-o-transition: width 1.2s ease-in-out;
transition: width 1.2s ease-in-out;
background-color: blue;
}
#logo {
-webkit-transform: skewX(20deg);
}
<div id="logo-wrapper">
<div id="logo">
<a href="#">
<img src="http://ipsumimage.appspot.com/100" alt="Logo" />
</a>
</div>
</div>
Found it.
-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-ms-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg);
Thanks