I have created a circle with a fontAwesome icon in it, and on hover, rotating it 180 degree that is working fine, But on hover when I mouseover and when icon moving to 180 its moving up by one pixel, not sure why.
My question is why its moving up by one pixel on hover, I'm not able to find the issue.
Here is the JSFiddle demo
EDIT Please note that its happening in Firefox only.
.share-icon {
background-color: #f00;
border-radius: 50%;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
color: #ffffff;
float: left;
font-size: 18px;
height: 45px;
line-height: 45px;
margin-top: 50px;
position: relative;
text-align: center;
width: 45px;
transition: all 0.5s ease 0s;
cursor: pointer;
}
.share-icon:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="share-icon" onclick="shairIcon(this)">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</div>
Refer this css, i have made correction.
You should add fa icon class on hover and add transition property.
.share-icon:hover .fa-share-alt {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transition: all 500ms ease;
}
Working DEMO!!!
Honestly I don't know exactly why but if you increase your font-size just by two pixels you'll get rid of this jump. Simply update your code to the following
.share-icon {
background-color: #f00;
border-radius: 50%;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
color: #ffffff;
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
cursor: pointer;
font-size: 20px;
}
.share-icon i {
transition: all 0.5s ease 0s;
}
.share-icon:hover i {
transform: rotate(180deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="share-icon" onclick="shairIcon(this)">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</div>
Related
This question already has answers here:
CSS Transition - eases in but doesn't ease out?
(2 answers)
Closed 2 years ago.
So i want to create a button, which moves upwards an creates a Little shadow underneath, if hovered and that is working out so far, but the problem is, the Animation just resets, if i stop hovering, while it should kind of play the animation backwards. In all examples I have seen it just does that without any extra command.
For example: My button moves upwards by 5 pixels in .3 seconds if hovered, if you stop hovering it should move downwards 5 pixels in 0.3 seconds again, but it just does it instantly.
I would really appreciate any help on the concern, i just can't comprehend it.
Here is the Code i use:
<head>
.probtn {
border-color: #282E34;
color: #282E34;
}
.probtn:hover {
background-color: #282E34;
color: white;
transition: all 0.3s;
transform-origin: bottom;
box-shadow: 0px 5px 5px 0px gray;
transform: translate(0px,-5px);
-webkit-transform: translate(0px,-5px);
-moz-transform: translate(0px,-5px);
-ms-transform: translate(0px,-5px);
-o-transform: translate(0px,-5px);
}
.btn {
border: 2px solid #282E34;
background-color: white;
color: #282E34;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
border-radius: 5Px;
}
</head>
<Body>
<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>
</Body>
Define the transition: all 0.3s; on your .probtn class instead of the :hover. Else once the hover-state is removed the transition property is removed as well.
.probtn {
border-color: #282E34;
color: #282E34;
transition: all 0.3s; /* moved to base class instead of hover state */
transform-origin: bottom;
}
.probtn:hover {
background-color: #282E34;
color: white;
box-shadow: 0px 5px 5px 0px gray;
transform: translate(0px,-5px);
-webkit-transform: translate(0px,-5px);
-moz-transform: translate(0px,-5px);
-ms-transform: translate(0px,-5px);
-o-transform: translate(0px,-5px);
}
.btn {
border: 2px solid #282E34;
background-color: white;
color: #282E34;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
border-radius: 5Px;
}
<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>
I'm trying to make a rotating menu for my web page, but when I rotate to the 2nd page (for example) and when I click somewhere else on the page, the menu returns to its initial position.
So my question is : how can I click on something else and not return to the first position ?
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "CCAVV";
text-align: center;
font: 30px/135px Georgia, Times, serif;
color: #efefef;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*HOVER STATES*/
.menu>.one:focus~.circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu>.two:focus~.circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu>.three:focus~.circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu>.four:focus~.circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
<div class="wrapper">
<div class="menu">
One
Two
Three
Four
<div class="circle">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
I'm not sure that you can prevent the default behavior of :focus with pure CSS. Furthermore, I'm not sure that using :focus is the best way to accomplish what you're trying to accomplish.
If you are open to using jQuery, this is quite easy to accomplish. (This could also be accomplished pretty easily with pure JavaScript if you don't want to use jQuery. Let me know if that is the case and I will edit my answer.)
Add jQuery and a JavaScript file in <head>:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Rotating CSS Menu</title>
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src='foo.js'></script>
<!-- load css style -->
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="menu">
One
Two
Three
Four
<div class="circle">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Remove the /*HOVER STATES*/ section from your CSS:
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "CCAVV";
text-align: center;
font: 30px/135px Georgia, Times, serif;
color: #efefef;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
Following is foo.js referenced in the <head> of your HTML. Using jQuery you can accomplish the desired behavior without using :focus...
//wait for the document to load
$(function() {
//when the user clicks "one" in the menu
$('.menu>.one').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(0deg)',
'-moz-transform': 'rotate(0deg)',
'-ms-transform': 'rotate(0deg)',
'-o-transform': 'rotate(0deg)',
'transform': 'rotate(0deg)'
});
});
//when the user clicks "two" in the menu
$('.menu>.two').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(-90deg)',
'-moz-transform': 'rotate(-90deg)',
'-ms-transform': 'rotate(-90deg)',
'-o-transform': 'rotate(-90deg)',
'transform': 'rotate(-90deg)'
});
});
//when the user clicks "three" in the menu
$('.menu>.three').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(-180deg)',
'-moz-transform': 'rotate(-180deg)',
'-ms-transform': 'rotate(-180deg)',
'-o-transform': 'rotate(-180deg)',
'transform': 'rotate(-180deg)'
});
});
//when the user clicks "four" in the menu
$('.menu>.four').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(-270deg)',
'-moz-transform': 'rotate(-270deg)',
'-ms-transform': 'rotate(-270deg)',
'-o-transform': 'rotate(-270deg)',
'transform': 'rotate(-270deg)'
});
});
});
I need to zoom image in on hover and focus. On hover from .9 to 1 and on focus from 1 to 1.2.
The problem is that while scaling, the picture is blurry. No matter what size I start with, .9 or 1.
I used two solutions:
transform: scale3d(.9, .9, .9);
transform: translateZ(0) scale (.9, .9);
But it didn't work (solution in snippet).
What am I doing wrong? Maybe there are other solutions?
.button {
border: none;
background-color: transparent;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://svgshare.com/i/FWE.svg');
width: 28px;
height: 36px;
transition: transform .3s ease, background .3s ease, opacity .2s ease;
box-shadow: none;
will-change: transform;
transform: scale3d(.9,.9,.9);
transform: translateZ(0) scale(.9, .9);
}
.button:hover {
cursor: pointer;
transform: scale3d(1,1,1);
transform: translateZ(0) scale(1, 1);
}
.button:focus {
outline: none;
transform: scale3d(1.2,1.2,1.2);
transform: translateZ(0) scale(1.2, 1.2);
}
<button class="button">
</button>
<button class="button">
</button>
You could put the image into a pseudo element and transition the size of that element - that way you will always keep a sharp svg (seems a lot sharper than any of the other ways we discussed in the comments):
.button {
cursor: pointer;
outline: none;
border: none;
width: 36px;
height: 36px;
background-color: transparent;
box-shadow: none;
position: relative;
}
.button:after {
content: '';
display: block;
background: url('https://svgshare.com/i/FWE.svg') center center no-repeat;
background-size: contain;
width: 26px;
height: 26px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .15s linear;
}
.button:hover:after {
width: 30px;
height: 30px;
}
.button:focus:after {
width: 34px;
height: 34px;
}
<button class="button">
</button>
<button class="button">
</button>
I am having problems creating a Navigation bar that can spin in a circle in CSS3 and HTML. How can I do this? Below is a picture of the idea from an old game. I want the same animation type that it uses. When it is on the active circle, the page is shown. As you move left and right, the page will change. Is there a way to accomplish this? How can I create this in CSS3 and HTML5.
I have added a code snippet of what I have done so far as a basic idea. I need two buttons that would allow the animation to move left or right instead of 1,2,3,4.
The idea comes from SliderDock. A dock for Windows and MacOS.
CSS3 should be able to accomplish this task if i'm not mistaken.
http://img05.deviantart.net/d13f/i/2011/139/7/4/altimit_mine_os_by_tenshi_no_chi-d3gowsq.png
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "Menu";
text-align: center;
font: 30px/120px Georgia, Times, serif;
color: #black;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #white;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*HOVER STATES*/
.menu > .one:hover ~ .circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu > .three:hover ~ .circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu > .four:hover ~ .circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Nav Menu</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="header"></div>
<div class="wrapper">
<div class="menu">
1
2
3
4
<div class="circle">
<ul>
<li>Home</li>
<li>World</li>
<li>Games</li>
<li>AboutUs</li>
</ul>
</div>
</div>
</div>
</body>
</html>
you can do it with CSS3 also. To do this use animation rotate on hover of that numbers and rotate the menu image.
you can do it by using javascript with onmousehover and onmouseleave event.
I'm building a personal website and in the header section(i.e div) i've a logo for which i'm trying to add flip animation on hover, to show the content written back of the logo. Need a help in fixing the problem with browser Chrome as well as IE11. Works fine with Mozilla.
<div id="logo">
<div id="logo_card" class="shadow">
<div class="front face">
<img src="./images/logo+.jpg" />
</div>
<div class="back face center">
<p>Sooner the logo will be changed</p>
</div>
</div>
CSS for animation:
#logo{
width:450px;
height:150px;
margin-left:300px;
border-radius: 5px;
z-index: 1;
}
#logo {
perspective: 1000;
}
#logo_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
border-radius: 5px;
}
#logo:hover #logo_card {
-moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg);
-moz-box-shadow: -5px 5px 5px #aaa;
-webkit-box-shadow: -5px 5px 5px #aaa;
box-shadow: 0 2px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
border-radius: 5px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 5px;
}
.face.back {
display: block;
-moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg);
-moz-box-sizing: border-box;
box-sizing: border-box;
/*padding: 10px;*/
color: white;
text-align: center;
background-color: transparent;
border-radius: 5px;
font-size:20px;
font-family: 'Helvetica Neue',Helvetica,arial,sans-serif;
}
Greately this works fine with Mozilla firefox browser only :(
Thank you,