I am rotating a hexagonal (6 sides shape) icon 60 degrees upon hovering and want it to stay rotated as long as you don't hover it again. If you hover the icon again, it will rotate another 60 degrees.
Is this effect possible with pure CSS ? The important part is for the icon to stay rotated for as long as you don't hover it again and to rotate another 60 degrees if you hover it.
I've tried the usual method with a transition and a transform, but the icon comes back at its original rotation when you unhover it.
.icon:hover {
transition: transform 0.5s;
transform: rotate(60deg);
}
With JS you rotate the square by 10 degrees each time you hover over it:
let div = document.querySelector(".a");
let i = 10; //degrees to rotate
const rotateIt = () => {
div.style.transform="rotate(" + i + "deg)";
i = i + 10;
}
div.addEventListener("mouseover", rotateIt);
div.a {
width: 100px;
height: 100px;
background-color: red;
}
div.a:hover {
transform: rotate(20deg);
}
<div class="a"></div>
Related
Using React, I have a component that I want to start rotated from a random location and rotate 360 degrees infinitely. What I have is:
HTML:
return <img className={`${props.className}`} style={{
animation: `spin 5s linear infinite`,
transform: `rotate(${Math.floor(Math.random() * (361));}deg)`
}} src={image} alt="img"/>
CSS:
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
By default, what this does is ignore the transform, load the image so that it is upright (i.e. 0 degrees), and rotate to 360 degrees (vertical again) over the course of 5 seconds. What I want is a way for from to be transform:rotate(deg);} and to to be {transform:rotate(<SOME RANDOM NUMBER + 360>deg);}. Is this possible?
As a side note, is it possible to randomize the direction it travels?
You can't get the required effect using transform rotate - as you have noted the animation will immediately alter this to rotate(0).
But what you can do is leverage the animation-delay CSS property.
Instead of calculating a random rotation, calculate a random time between 0 and 5 seconds and use that, negative, to set animation-delay.The animation will start part way through its cycle, at a random point and so at a random angle.
Here's a pure CSS/HTML/JS snippet with the rotation slowed down so it's easier to see that the rotation does start at a different angle each time:
const spinner = document.querySelector('.spin');
spinner.style.setProperty('--delay', Math.floor(Math.random() * 50));
.spin {
width: 100px;
height: 100px;
background: red;
animation: spin 50s linear infinite;
animation-delay: calc(var(--delay) * -1s);
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="spin"></div>
I am trying to make the background color of a row change on hover with only the area of the cursor changing color/being highlighted.
I have a white background color set, and would like to have the area of the cursor highlighted with a yellow feathered circle when hovering over the background.
I can't seem to find the proper code for it, but only finding codes to change the complete background on hover.
Is this something that's possible to do in CSS?
.vc_row {
-webkit-transition:all 1s;
transition:all 1s;
}
.vc_row:hover {
background: -webkit-gradient(
radial, 500 25%, 20, 500 25%, 40, from(#faf9f4), to(#cef230)
);
}
Even through my predisposition to using JavaScript (it is where my skills lie), I believe you can't just do this in CSS, but also need JavaScript to do this. There might be a way, but I don't know it, and I am curious for someone else to answer with a magical full CSS solution and blow our minds. :D
For one approach of doing this, you need to use ::after to create the hover-element inside the row. You can then use CSS variables to pass your mouse position (gathered through JavaScript) into the hover-element, making it track the mouse position. Here is an example:
<!-- HTML -->
<div class="row">
</div>
/* CSS */
.row {
width: 300px;
height: 300px;
margin: 30px 30px;
position: relative;
overflow: hidden;
background: white;
}
.row::after {
content: "";
position: absolute;
top: calc(var(--y, 0) * 1px - 50px);
left: calc(var(--x, 0) * 1px - 50px);
width: 100px;
height: 100px;
opacity: 0;
background: radial-gradient(#cef230, #ffffff00 80%);
transition: opacity 1s;
}
.row:hover::after {
opacity: 1;
}
// JavaScript
const element = document.querySelector(".row");
element.addEventListener("mousemove", (e) => {
const { x, y } = element.getBoundingClientRect();
element.style.setProperty("--x", e.clientX - x);
element.style.setProperty("--y", e.clientY - y);
});
Key elements are the ::after to create the hover-element, the use of position: absolute; to allow for "top" and "left" attributes to position the hover-element, and applying overflow: hidden; to the row: in my testing the hover-element kept the mouse-move event firing even outside the row, unless overflow was hidden.
This is my CSS code, only the Icon is rotating but the fade animation of that rectangle is not working while hovering that circle.
this is video link Video
This is the image of the code above.
I want to add fade animation to the tooltip and rotation animation to the icon on hovering that button.
#Account-Icon:hover > #user-logo {
animation: settingRole 2s;
}
#Account-Icon:hover > #popup { //can I use #Account-Icon:hover twice??
animation: opacity 2s;
}
#keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I want to add two actions when hovering over that circle
1.fade animation in the popup(in rectangle)
2.rotation of setting icon
Yes you can run multiple :hover declarations on the same element.
I am guessing that the pop up is not a direct child of the #Account-Icon if it isn't working for you.
#Account-Icon:hover #user-logo {
color: red;
}
#Account-Icon:hover #popup {
color: blue;
}
<div id="Account-Icon">
<div id="user-logo">
logo
</div>
<div id="popup">
pop up
</div>
</div>
I have an HTML element defined like this:
<div id="myElement" class="rotated">></div>
<button onClick="toggle('myElement');">Toggle</button>
function toggle(eid) {
var el = document.getElementById(eid);
if (el) {
el.className += el.className ? 'rotate-clockwise' : 'rotate-counter-clockwise';
}
}
I then have my CSS defined like this:
.rotated {
transform: rotate(90deg);
}
#keyframes rotateClockwise { from { ? } to { ? } }
.rotate-clockwise {
animation rotateClockwise 0.1s linear;
}
#keyframes rotateCounterClockwise { from { ? } to { ? } }
.rotate-counter-clockwise {
animation rotateCounterClockwise 0.1s linear;
}
I'm not sure what to add for the from and to values of my keyframes. The fact that my element starts rotated by 90 degrees kind of throws me off. Am I on the correct track or way off?
Thanks!
Your element starts rotated because it has the .rotated class, which tells it to be rotated by 90deg.
I modified your example a little to make it more idiomatic.
var button = document.querySelector('button')
var el = document.querySelector('#myElement')
function toggle(event) {
el.classList.toggle('rotate-clockwise')
}
button.addEventListener('click', toggle, false)
.my-element {
display: inline-block;
transition: transform 0.1s linear;
}
.rotate-clockwise {
transform: rotate(90deg);
}
<div id="myElement" class="my-element">></div>
<button>Toggle</button>
In the javascript we first get our button and element so we can operate on it later (we use querySelector which is more modern and lets you use CSS selectors). Then we define your event handler, which simply toggles the rotate-clockwise CSS class on and off. Lastly we attach our toggle function as a click event handler to the button.
In CSS we tell my-element to be inline-block as to not stretch over the entire width of the window. Also, every change to transform should use a linear transition of 0.1s. Every time .rotate-clockwise gets added or removed the element rotates.
Hopefully this does what you want and helps you understand the problem better.
I have two canvas and when I draw something on the first one, I want to be able to draw the exact same thing but flipped like a mirror in the second one.
So I tried using CSS Transform, but it makes the mouse movement on the second Canvas not accurate.
This is my code:
http://jsfiddle.net/q5vZc/
#paint {
width: 100%;
height: 50%;
float: left;
}
#paint2 {
float: right;
width: 100%;
height: 50%;
/*pointer-events: none;*/
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
Is there a way to fix this?
I created a function that flips the mouse movement on the second canvas. In which I pass the mouse point where it was clicked and the width of the canvas.
function flipHorizontal(ponto, width) {
var x_linha = (width- ponto.x);
var y_linha = (ponto.y);
var flipped = {
x: x_linha,
y: y_linha
};
return flipped;
}
Do not use css scaling unless you master it, strange result will follow.
Most simple in your case is to remove any css, and just copy the left half by hand into the right part.
So use only one canvas, draw only on the left part, and each time you finished your drawings, call this function to have the left part mirrored :
// copy the the left part of the canvas on its right part
function mirrorContext(context) {
var canvas = context.canvas;
var width = canvas.width;
var height = canvas.height;
// preserve context
context.save();
// translate to middle of right part of canvas
context.translate(3*width/4, height/2);
// flip x direction
context.scale(-1, 1);
// draw left part on right part, reversed
context.drawImage(canvas
/* take left part of canvas... */ ,0, 0, width/2, height
/* ... copy it on right part */ ,-width/4, -height/2, width/2, height
);
// cancel any context change
context.restore();
}
http://jsbin.com/gigazeka/1/edit?js,output