How can I rotate a button 90° with hover in css? [duplicate] - html

This question already has answers here:
Spin or rotate an image on hover
(5 answers)
Closed 8 months ago.
I'm making a folding menu for my simple website and I need to rotate a button 90° when the mouse is over it.

button {
transform: rotate(90deg);
}

button:hover{
transition: 0.70s;
transform: rotate(90deg);
}
Is the property that you're looking for.
This is not my codepen but it does show the steps needed
codepen.io
Without seeing how you're implementing it this is the barebones, but it's worth mentioning that I recommend rotating a div surrounding the button in order to give the mouse a more lenient area for the hover to take effect.

Related

Rotating icon on hover

I am still learning web development and decided to test my skills by making the minecraft.net website again. On one of the links on the main page there is a dropdown menu with an arrow pointed down beside the link. On hover the dropdown menu comes down and the arrow points up. Does anyone know how to code this hover effect for the link and arrow. Also the arrow changes direction and the menu comes down wherever you hover over the link or the arrow beside it. Your help would be much appreciated. Thanks in advance.
img:hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}
If this arrow element (div, img etc) has a class e.g. "dropdown-arrow", you could do something like this:
.dropdown-arrow {
transform: rotate(0deg)
transition: transform 0.3s ease-in-out
}
.dropdown-arrow:hover {
transform: rotate(180deg)
}
Setting two transforms will ensure that when you are not hovering, it will return to its normal rotation. The transition will make this rotation smoother, not an instant change.
You can make an on hover event happen in CSS using the :hover psuedoselector. As for rotating your arrow, this using CSS' rotate() function will work:
#arrow:hover {
transform: rotate(180deg);
}
<div id="arrow">▼</div>

image blurs during CSS transition and is janky

Hi I'm learning to create some hover effects and managed to pull off what I had in mind with this animation: http://jsbin.com/xawibo/
The CSS that animates the image is this:
transform: scale(3, 3) translateY(50%);
But the animation is not smooth. The thumbnail becomes blurry during the transition, becoming crisp again only when the transition stops. There is also a slight left/right jerky movement.
Here is a quick Youtube video of what I see:
https://www.youtube.com/watch?v=yoIgV1ORbN8&feature=youtu.be
What am I doing that is affecting the perforamce of this animation? Am I nesting too many DIVs?
Seems like Chrome specific issue.
Instead of transform:scale() you can animate width:
.caption:hover > span img{
background: rgba(0, 158, 205, 0.45);
transform: translate(0,10%) ;
width:100%;
}
This happens on chrome on Windows apparently.
Seems very similar to the issue depicted here:
CSS transition effect makes image blurry / moves image 1px, in Chrome?
What happens when using -webkit-transform: [...] along with transform: [...] ?

How do a make an image tilt forward on hover

I have been playing with transitions all morning and am at a road block. I have the need to have an image "tilt" forward when hovered over. Basically we have beer taps that when they hover over they want them to tilt as if they are being pulled down. I have played with a bunch of code but right now have nothing remotely close to post here. If anyone could give some help on how to accomplish this in css3 it would be greatly appreciated.
Below is a basic version (works in safari & chrome). You can play with the perspective values to change the effect.
I'm not sure where you were running into trouble, but the key points here are:
container to hold the rotated elements that will allow you to use perspective
perspective to change the overall look of the animation
transform-origin to set the rotation point of the image (using the bottom in the demo)
rotateX to rotate around the x axis - tilting the image toward/away from the viewer
html:
<div class="container">
<img src="http://placekitten.com/200/300" width="200" height="300"></img>
</div>
CSS:
.container {
-webkit-perspective: 1000px;
perspective: 1000px;
margin: 2em;
transform-style: preserve-3d;
}
img {
transition: all .5s ease;
-webkit-transform: rotateX(0deg);
-webkit-transform-origin-y: 300px; /* rotates from the bottom of the image */
}
img:hover {
-webkit-transform: rotateX(-40deg);
}
Demo jsFiddle
CSS Supports X and Y 3D rotations, but you cannot rotate on the Z axis (forwards and backwards) purely in CSS, maybe Javascript or jQuery would be able to do so.
For more on CSS rotation try reading up on it here: http://www.w3schools.com/css/css3_3dtransforms.asp
I would play around with something like CAMANJS or just create a second background image that tilts your existing image and use that on the hover event.

CSS image overlay delay display:none to display:block [duplicate]

This question already has answers here:
How can I delay a :hover effect in CSS?
(3 answers)
Closed 9 years ago.
I have an image with a button on it. The button will only be visible, if I hover over the image.
I change it from display:none to display:block and it appears instantly.
I would like to delay the appearance of this button by 1 sec or make it appear linear, so it's a smooth transition. I saw the CSS3 transition property and applied this, by using opacity, too (0.0 to 1.0).
It seems not to be working. What am I missing? I don't think the -webkit specific properties are the reason.
Check out my fiddle.js example:
Fiddle.js: Image hover over overlay transition example
Thank you!
Here is a working fiddle
I have use all instead of opacity, but either way you can change that too.
.image_controls{
position: absolute;
left: 0;
top:5px;
opacity:0.0;
}
.image_wrapper:hover .image_controls {
-webkit-transition: all 2s ease;
transition: all 2s ease;
display: block;
opacity:.9;
}
You could use jQuery's fadeIn() / fadeOut(). As you tagged javascript and jquery, I guess using JS would not be a concern for you, right?

Clickable link area unexpectedly smaller after CSS transform

I have an unordered list with a few list items that act as flip cards using CSS 3D transforms. I want them to flip via clicks on links/anchor elements inside of the list items, and these links fill up the entire list item as well.
The list items look and act fine in their default non-flipped state, but once I click one and it flips, the clickable link area on the back side of it is only on the top half of the list item. When I inspect in Chrome, the link area is still filling up the entire height of the list item, so I'm not sure what is going on.
Fiddle: http://jsfiddle.net/chucknelson/B8aaR/
Below is a summary of the transform properties I'm using on various elements (see fiddle for detail):
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 1.5em;
-webkit-transform: rotateX(180deg);
Note that I'm testing in Chrome 28 on Windows, and I'm just using -webkit prefix items in the fiddle. I also apologize for any messy CSS or markup, this problem had me iterating a bit. Any help in understanding what is happening is greatly appreciated!
Update 8/11/2013:
I was having this same problem with a 2D transforms on list items (just flipping the item, no front/back). Adding #thirtydot's translateZ(1px) transform in the CSS for the <a> tag fixed that one too. So it looks like the issue is related to the z-axis...but only on part of the link. Maybe this is a bug in browsers?
This problem may be the result of a webkit rendering bug, but the solution was to tranlsate the link's Z-axis by 1px - this seemed to push the link layer up and have it fully clickable.
To fix the 3D transform (via the fiddle from #thirtydot http://jsfiddle.net/thirtydot/YCGjZ/7/), some javascript was required:
setTimeout(function() {
flipTarget.find('div.back a').css('-webkit-transform', 'translateZ(1px)');
flipTarget.find('div.back a').css('transform', 'translateZ(1px)');
}, 600);
When using a 2D transform, adding translateZ in the CSS class worked:
.flipped {
border-top: 1px solid black;
background-color: #555;
-webkit-transform: rotateX(180deg);
}
.flipped a {
color: #eee;
text-decoration: line-through;
-webkit-transform: scaleY(-1) translateZ(1px); /* the fix */
}