I make an arrow, using two borders of a box and rotating the box. When clicking it, the arrow should point up instead of down, and use a transition.
In Chrome/Safari/Firefox this works corretly. In IE11 however, it rotates weirdly. It ends up in the correct orientation, but gets there differently/around other axis than in the other browsers.
button:after {
/* make a box with two borders */
content: "";
border-left: 1.5px solid blue;
border-top: 1.5px solid blue;
transition: all 1s;
width: 10px;
height: 10px;
display: inline-block;
margin-left: 0.5rem;
/* rotate to give illusion of arrows */
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform-origin: 25% 25%;
-webkit-transform-origin: 25% 25%;
}
/* change direction of arrow */
button.open:after {
transform: rotateX(180deg) rotateZ(-135deg);
-webkit-transform: rotateX(180deg) rotateZ(-135deg);
}
Interactive example, click the button:
https://jsfiddle.net/b51sctnu/1/
In general, it's a good idea to keep the changes easy for the browser to understand
In your case, use 2 transforms that are the most similar posible.
Since the final step is
transform: rotateX(180deg) rotateZ(-135deg);
in the initial step use:
transform: rotateX(0deg) rotateZ(-135deg);
The 0deg rotation seems useless, but matches the final transform
Example, changing the new state to a hover to make easier to go back and forth
button:after {
content: "";
border-left: 1.5px solid blue;
border-top: 1.5px solid blue;
transition: all 1s;
width: 10px;
height: 10px;
display: inline-block;
margin-left: 0.5rem;
-webkit-transform-origin: 25% 25%;
-webkit-transform: rotate(-135deg);
transform-origin: 25% 25%;
transform: rotateX(0deg) rotateZ(-135deg);
}
button:hover:after {
-webkit-transform: rotateX(180deg) rotateZ(-135deg);
transform: rotateX(180deg) rotateZ(-135deg);
}
button {
border: 0px;
background: grey;
padding: 20px;
}
<button>asdasd</button>
Related
can someone help me to do this hover effect
it is a normal circle
and when passing over it I would like it to look that way and even for the circle to rotate
Thanks in advance
If I understand you correctly, here is one way you could make this work.
There are 3 elements to this; the image, the circle and the gap.
The circle is a div with a border-radius to round it out, and a border with the color of your choice.
The gap is a div that is the full height of the wrapper and the width of the intended gap. The div is given the same color as the background (white in this case - change to whatever you want). Then we apply a transform of -30deg to get the angle in your example.
The image is a div with a border-radius and is positioned in the middle of the wrapper.
The css then makes use of keyframes to add an animation to the gap div to make it rotate when you hover over the wrapper. This gives the illusion of the circle rotating.
.wrapper {
position: relative;
height: 350px;
width: 350px;
}
.wrapper .circle {
position: absolute;
height: 340px;
width: 340px;
border: 5px solid #00C17F;
border-radius: 50%;
}
.wrapper .gap {
position: absolute;
width: 100px;
height: 350px;
left: 125px;
background: white;
-ms-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.wrapper:hover .gap {
display: block;
-webkit-animation: rotateCircle 20s linear infinite;
-moz-animation: rotateCircle 20s linear infinite;
-ms-animation: rotateCircle 20s linear infinite;
-o-animation: rotateCircle 20s linear infinite;
animation: rotateCircle 20s linear infinite;
}
.wrapper .image {
position: absolute;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/f2/Light_Work_%28Unsplash%29.jpg");
background-size: cover;
background-position: right;
border-radius: 50%;
top: 10%;
left: 10%;
height: 80%;
width: 80%;
}
#keyframes rotateCircle {
from {
-ms-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
to {
-ms-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-webkit-transform: rotate(330deg);
-o-transform: rotate(330deg);
transform: rotate(330deg);
}
}
<div class="wrapper">
<div class="circle"></div>
<div class="gap"></div>
<div class="image"></div>
</div>
You can have just one HTML element. But you need 3 layers:
holds the green circle
holds the image
creates the gaps by overwriting part of the circle
Layer 3 can also be made to rotate on hover.
CSS allows you to attach before and after pseudo elements to elements such as divs (not to normal img elements though, hence we use a div).
This way we have our 3 layers. We use the div itself to display the green circle and above it (in z-index terms) we place a pseudo element which creates the gaps by having a conic gradient background image. This only turns up when the user hovers. The other pseudo element holds the image with z-index set so it is above the others and doesn't get affected by the rotating conic gradient.
Note that all units used here are relative so the code is responsive.
.circle {
--gap: 30deg; /* set this to what you want the gap to be */
--border: 2px; /* set this to what you want the width of the green in the border to be can be in vmin for example for full responsiveness */
position: relative;
border: solid green var(--border);
border-radius: 50%;
width: 50vmin;
height: 50vmin;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.circle::before, .circle::after {
content: '';
border-radius: 50%;
position: absolute;
margin: 0;
padding: 0;
}
.circle::after {
/* position and center the image */
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 70%;
height: 70%;
background-image: url(https://picsum.photos/id/0/400/400);
background-size: cover;
border-radius: 50%;
border-style: solid;
z-index: 2;
}
.circle:hover::before {
width: calc(100% + (3 * var(--border)));/* make it slightly bigger to make sure a 'stray' screen pixel does not get left out when the system converts part CSS px to screen pixels */
height: calc(100% + (3 * var(--border)));
top: calc(-1.5 * var(--border));
left: calc(-1.5 * var(--border));
z-index: 1;
background-image: conic-gradient(white 0deg, white var(--gap), transparent var(--gap), transparent 180deg, white 180deg, white calc(180deg + var(--gap)), transparent calc(180deg + var(--gap)), transparent 360deg);
animation: rotate 2s infinite linear;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
<div class="circle"></div>
Hi StackOverflow community,
I am trying to produce an "Orbit" on-hover animation, where a number of div elements are stacked on top of one another and they have different sizes so I can play with the borders circling around the "planet" (ie: main element).
My problem though is that it seems like when I stack one div over another and both are supposed to be animated, only the front element plays the animation and not those under.
I thought a z-index property could fix this, but as I thought about this I just thought I'd be switching one animation for the other, since the one I'd elevate with the z-index would then become the front and cover the one element that's now below.
Here's some code:
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner-1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner-4:hover {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
So, basically I want both spinner-1 and spinner-4 to execute their animation when I hover over the spinner. Any ideas?
Set the hover on their shared parent element.
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner:hover #spinner-1 {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner:hover #spinner-4 {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
What is supposed to happen: Button grows slightly when hovered over.
What does happen: Button grows slightly when hovered over and move to the right.
How can I fix this?
Here is the code:
CSS
#skipButton
{
border-radius: 10em;
background: -moz-radial-gradient(center, Pink, Magenta);
background: -webkit-radial-gradient(center, Pink, Magenta);
background: radial-gradient(center, Pink, Magenta);
border: none;
font-family: cursive;
font-size: 2em;
left: 50%;
margin-right: -50%;
outline: none;
padding: .25em;
position: relative;
text-align: center;
-webkit-transform: translate(-50%, 0%);
-webkit-transition: -webkit-transform 0.3s ease-in-out;
}
#skipButton:hover
{
-webkit-transform: scale(1.25);
}
What's happening is that you're scaling and translating. You're implicitly translating back to 0 on hover, since it's already been set. You need this:
#skipButton:hover {
-webkit-transform: translate(-50%, 0%) scale(1.25);
}
I'm trying to create the following effect with on a design: http://i.imgur.com/RIaSA3N.png
I can create a bordered circle fine - but the matter of partially completing the circle is proving difficult. There are a myriad of different ways to do this with Javascript and Canvas, but I can't find a solid way to achieve it in CSS. I don't mind having a number of different classes for different values, but is there an elegant solution available?
Updated: this is very possible using pure CSS3.
(You should be able to open the below demo and customize to your result)
Use #keyframes to animate between the numbers. You'll need to add this.
Below is using #keyframes 'rotate' { for the circular motion.
body { background: #222; }
.circle {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #333;
border-radius: 50%;
}
.inner-circle {
width: 92%;
height: 92%;
background: #222;
border-radius: 50%;
margin: auto;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.spinner {
height: 0;
width: 0;
border-radius: 50%;
border-right: 50px solid rgba(255,255,255,0.3);
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid transparent;
-webkit-animation: rotate 1.6s infinite;
animation: rotate 1.6s infinite;
}
#-webkit-keyframes 'rotate' {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes 'rotate' {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="circle">
<div class="spinner"></div>
<div class="inner-circle"></div>
</div>
So I have these hexagonal tiles that I would like to scale up on hover. The hexagon is done with multiple DIVS and CSS3 transforms. I'd like to have is transition in the scale, but the transformed parts lose their transform during the transition and re-appear after it finishes. Any suggestions?
Here's a fiddle: http://jsfiddle.net/A2mTU/1/
Here's what it should look like (NOTE: I know they use the canvas element, I need to use regular CSS for this): http://www.upperfirst.com
Thanks!
I would recommend using this technique for creating the hexagons so that you don't get the issues you are currently experiencing when scaling them: http://jsfiddle.net/joshnh/jZMEy/
div {
background: black;
height: 60px;
position: relative;
width: 120px;
-webkit-transition: .25s;
-moz-transition: .25s;
-ms-transition: .25s;
-o-transition: .25s;
transition: .25s;
}
div:after {
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 35px solid black;
bottom: -35px;
height: 0;
content: '';
left: 0;
position: absolute;
width: 0;
}
div:before {
border-bottom: 35px solid black;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
content: '';
left: 0;
position: absolute;
top: -35px;
width: 0;
}
div:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
The way you form the hexagonal tiles is not good for applying animations with absolute positioned elements. I would recommend this way: http://jsfiddle.net/linmic/5aqSK/
Cheers