I have a div whose height and width will be dynamic. I'm tring to have an dotted animation border to that div. Problem which i'm facing is animation duration is not relative to the height and width. i.e whatever height and width its animation should be at same speed across all the corners
.dynamic {
position: absolute;
height: 30px;
width: 300px;
overflow: hidden
}
.dynamic::before {
animation: slideDash 2.5s infinite linear;
position: absolute;
content: '';
left: 0;
right: 0;
outline: 1px dashed #fff;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
width: 200%;
}
.dynamic::after {
animation: slideDash 2.5s infinite linear reverse;
position: absolute;
content: '';
right: 0;
bottom: 0;
outline: 1px dashed #fff;
left: 0;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
width: 200%;
}
.dynamic div::before {
animation: slideDashRev 2.5s infinite linear reverse;
position: absolute;
content: '';
top: 0;
bottom: 0;
outline: 1px dashed #fff;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
height: 200%;
}
.dynamic div::after {
animation: slideDashRev 2.5s infinite linear;
position: absolute;
content: '';
top: 0;
bottom: 0;
outline: 1px dashed #fff;
right: 0;
box-shadow: 0 0 0 1px rgb(23, 163, 102);
height: 200%;
}
#keyframes slideDash {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0%);
}
}
#keyframes slideDashRev {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0%);
}
}
<div class="dynamic">
<div></div>
</div>
Just correcting the direction of the animation
.dynamic {
position: relative;
width: 300px;
height: 30px;
overflow: hidden;
color: red;
}
.dynamic .line {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.dynamic .line:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.dynamic .line:nth-of-type(2) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-left: -164px; /* margin-left=(minus)((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(3) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.dynamic .line:nth-of-type(4) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
margin-left: 164px; /* margin-left=((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(1) i, .dynamic .line:nth-of-type(3) i {
-webkit-animation: move 2.5s infinite linear reverse;
animation: move 2.5s infinite linear reverse;
}
.dynamic .line:nth-of-type(2) i, .dynamic .line:nth-of-type(4) i {
-webkit-animation: move 2.5s infinite linear;
animation: move 2.5s infinite linear;
}
.dynamic .line i {
left: 0;
top: 0;
width: 200%;
display: block;
position: absolute;
border-bottom: 1px dashed;
}
.dynamic .text {
width: 100%;
line-height: 30px;
display: block;
text-align: center;
position: absolute;
font-size: 18px;
}
#-webkit-keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
#keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
<body>
<div class="dynamic">
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="text">Same Direction!!</div>
</div>
</body>
Try below snippet.
.dynamic {
position: relative;
width: 300px;
height: 30px;
overflow: hidden;
color: green;
}
.dynamic .line {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.dynamic .line:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.dynamic .line:nth-of-type(2) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-left: -164px;
/* margin-left=(minus)((height+width)/2)-(border-width) */
}
.dynamic .line:nth-of-type(3) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.dynamic .line:nth-of-type(4) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
margin-left: 164px;
/* margin-left=((height+width)/2)-(border-width) */
}
.dynamic .line i {
left: 0;
top: 0;
width: 200%;
display: block;
position: absolute;
border-bottom: 1px dashed;
-webkit-animation: move 2.5s infinite linear reverse;
animation: move 2.5s infinite linear reverse;
}
.dynamic .text {
width: 100%;
line-height: 30px;
display: block;
text-align: center;
position: absolute;
font-size: 18px;
}
#-webkit-keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
#keyframes move {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
<body>
<div class="dynamic">
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="line"><i></i>
</div>
<div class="text">Some text here</div>
</div>
</body>
.dynamic {
position: absolute;
height: 50px;
width: 50px;
overflow: hidden
}
Having the same dimensions for the height and and width makes the animation speed the same.
Note: You can replace the 50 with any dimension of your choice.
Related
I have created a loader using loader.io and integrated the css and HTML in the angular application but my loader is not displayed on the center of the screen with backdrop as it should.
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
I want to bring the loader to the center.
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 50%;
left: 50%;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<body>
<div class="centered">
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
</div>
<style>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
color:darkred;
}
#keyframes spin {
0% { transform: rotate(0deg) }
50% { transform: rotate(180deg) }
100% { transform: rotate(360deg) }
}
.loader div {
position: absolute;
animation: spin 3.77s linear infinite;
width: 113.08px;
height: 113.08px;
top: 71.96px;
left: 71.96px;
border-radius: 50%;
box-shadow: 0 4.6259999999999994px 0 0 #20c997;
transform-origin: 56.54px 58.852999999999994px;
}
.loader-container {
width: 257px;
height: 257px;
display: inline-block;
overflow: hidden;
background: blue;
}
.loader {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.loader div { box-sizing: content-box; }
</style>
</body>
</html>
I am trying to build a donut chart with css. I am observing that it is unable to rotate more than 180 degrees. Am I missing anything.
This stops me to show donut chart for any data which is more than 50%.
http://jsfiddle.net/BkJY7/80/
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
You are missing the keyframes for rotate-lt.
Also, some minor adjustments on the angles:
body {
margin: 50px;
}
.spinner {
width: 250px;
height: 250px;
background: #aaa;
margin: 0 auto;
position: relative;
}
.spinner:after {
position: absolute;
content: "";
width: 0%;
height: 0%;
border-radius: 100%;
background: #fff;
top: 10%;
left: 10%;
}
.spinner span em {
background: #0e728e;
-webkit-animation-duration: 6s;
}
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(180deg); }
}
.spinner {
border-radius: 100%;
position: relative;
}
.spinner span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner span:first-child {
left: 0;
}
.spinner span:last-child {
left: 50%;
}
.spinner span em {
border-radius: 250px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
</div>
I would try to use this from css-tricks to achieve what you want:
https://codepen.io/HugoGiraudel/pen/BHEwo
Tutorial:
https://css-tricks.com/css-pie-timer/
html:
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
css:
.wrapper {
position: relative;
margin: 40px auto;
background: white;
}
.wrapper, .wrapper * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
}
.wrapper .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: #08C;
border: 5px solid rgba(0,0,0,0.5);
}
.wrapper .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
border-right: none;
animation: rota 5s linear infinite;
}
.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
animation-play-state: running;
}
.wrapper .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: opa 5s steps(1, end) infinite reverse;
border-left: none;
}
.wrapper .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: opa 5s steps(1, end) infinite;
}
#keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes opa {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
Also you can check this out also nice tutorial:
http://javabeat.net/pie-chart-css3-html/
Keep in mind I take no credit for writing this code, just helpin.
you add keyframe only for rotate-rt that why its rotate half
add a keyframe for rotate-lt so get the better result
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
I've been struggling with this for the past few days, so help would be greatly appreciated. I have a Title with a line (hr element) right below it. I'm trying to have a div centered in the hr that grows and shrinks. However, when the css3 animation is applied it causes the div to be displaced down and to the right, as if the div's top-left point (which I think is (0,0)) is set to be where the middle was.
I've created a jsfiddle to illustrate what I mean.
Here's my html:
<div id="header">
<h1>Center</h1>
<div id="action-bar">
<hr class="center-line" />
<div class="circle animation"></div>
</div>
</div>
and my css:
div#header {
color: #000;
width: 90%;
text-align: center;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
div#header h1 {
font-size: 50px;
font-weight: 300;
margin-top: 0px;
margin-bottom: 0px;
}
/* the line beneath h1 */
div #action-bar {
margin: 25px 0;
position: relative;
}
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
div.circle:hover {
width: 2em;
height: 2em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
hr.center-line {
border: 0;
height: .25em;
background: #000;
}
/* animation */
#keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
Can anybody point be in the right direction? I'm looking for a pure-css solution if possible. Thanks!
Add negative margin to your circle element, half of it's width and height:
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
margin-left: -0.5em;
margin-top: -0.5em;
}
div.circle:hover {
width: 2em;
height: 2em;
margin-left: -1em;
margin-top: -1em;
}
jsFiddle Demo.
Here is a smooth pulsing option.
http://jsfiddle.net/aLjsut5r/4/
/* animation */
#keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
.pulsing {
border: 3px solid #999;
-webkit-border-radius: 30px;
height: 18px;
width: 18px;
position: absolute;
left:20px;
top:214px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.5, 0.5); opacity: 0.5;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.5;}
}
I'm trying to create a circular menu with 6 radials using html and css. I only get 5 of the 6 total radials (borders). I need get the last radial, between item5 and item6. I need get the same of the picture:
DEMO
HTML
<div id="menu">
<div class="item1 item">
<div class="content">Solución Aula Digital</div>
</div>
<div class="item2 item">
<div class="content">Live Streaming</div>
</div>
<div class="item3 item">
<div class="content">Social Tecal Online</div>
</div>
<div class="item4 item">
<div class="content">FlexScorn</div>
</div>
<div class="item5 item">
<div class="content">Video On Demand</div>
</div>
<div id="wrapper6">
<div class="item6 item">
<div class="content">Video Colaboración</div>
</div>
</div>
<div id="center">
</div>
</div>
CSS
#menu {
background: #aaa;
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
border-radius: 155px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
#center {
position: absolute;
left: 60px;
top: 60px;
width: 180px;
height: 180px;
z-index: 10;
background: #FFFFFF;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
#center a {
display: block;
width: 100%;
height: 100%
}
.item {
background: #aaa;
overflow: hidden;
position: absolute;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transition: background .5s;
-moz-transition: background .5s;
-webkit-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
border: 3px solid #FFFFFF;
}
.item:hover {
background: #eee
}
.item1 {
z-index: 1;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
width: 134px;
height: 134px;
}
.item2 {
z-index: 2;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
width: 150px;
height: 150px;
}
.item3 {
z-index: 3;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
width: 150px;
height: 150px;
}
.item4 {
z-index: 4;
transform: rotate(240deg);
-moz-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
width: 152px;
height: 152px;
}
.item5 {
z-index: 5;
transform: rotate(300deg);
-moz-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 151px;
height: 151px;
}
.item6 {
border: none;
position: absolute;
z-index: 6;
transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 140px;
height: 140px;
}
#wrapper6 {
position: absolute;
width: 160px;
height: 160px;
overflow: hidden;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
/*border: 2px solid #FFFFFF;*/
}
.item1 .content {
left: 0px;
top: 17px;
transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.item2 .content {
left: -5px;
top: 31px;
transform: rotate(-59deg);
-moz-transform: rotate(-59deg);
-webkit-transform: rotate(-59deg);
}
.item3 .content {
left: -40px;
top: 8px;
transform: rotate(-237deg);
-moz-transform: rotate(-237deg);
-webkit-transform: rotate(-237deg);
}
.item4 .content {
left: -43px;
top: 4px;
transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-webkit-transform: rotate(-240deg);
}
.item5 .content {
left: -52px;
top: 7px;
transform: rotate(-247deg);
-moz-transform: rotate(-247deg);
-webkit-transform: rotate(-247deg);
}
.item6 .content {
left: 26px;
top: -3px;
transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-webkit-transform: rotate(-29deg);
}
.content, .content a {
width: 100%;
height: 100%;
text-align: center
}
.content {
position: absolute;
}
.content a {
line-height: 100px;
display: block;
position: absolute;
text-decoration: none;
font-family: 'Segoe UI', Arial, Verdana, sans-serif;
font-size: 12px;
/*text-shadow: 1px 1px #eee;
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff*/
}
.display-target {
display: none;
text-align: center;
opacity: 0;
}
.display-target:target {
display: block;
opacity: 1;
animation: fade-in 1s;
-moz-animation: fade-in 1s;
-webkit-animation: fade-in 1s;
-o-animation: fade-in 1s;
-ms-animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-webkit-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-o-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
I figured out a simple problem to get your line break in, albeit it is a little odd.
All I did was add an additional item without any content and then rotated it, gave it a background and transformed it into place.
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
width: 1px;
height: 70px;
left: 68px;
top: 81px;
jsFiddle demo
The reason why you didn't have a white border there is because your item6 was rotated so it lined up with your item1, instead of it being rotated so it created the border between item5 and item6.
I tried rotating item6 so it created the border between itself and 5, but it caused it to overlap with item1, which just caused a never ending z-index loop in order to solve it
I'm trying to create a circular menu with radials using html and css, but the white borders are not built well. And it is not look fine in google chrome (not like a circle). I need get the last white radial, between item5 and item6. I have tried the next code:
DEMO
HTML
<div id="menu">
<div class="item1 item">
<div class="content">Solución Aula Digital</div>
</div>
<div class="item2 item">
<div class="content">Live Streaming</div>
</div>
<div class="item3 item">
<div class="content">Social Tecal Online</div>
</div>
<div class="item4 item">
<div class="content">FlexScorn</div>
</div>
<div class="item5 item">
<div class="content">Video On Demand</div>
</div>
<div id="wrapper6">
<div class="item6 item">
<div class="content">Video Colaboración</div>
</div>
</div>
<div id="center">
</div>
</div>
CSS
#menu {
background: #aaa;
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
border-radius: 155px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
}
#center {
position: absolute;
left: 60px;
top: 60px;
width: 180px;
height: 180px;
z-index: 10;
background: #FFFFFF;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
#center a {
display: block;
width: 100%;
height: 100%
}
.item {
background: #aaa;
overflow: hidden;
position: absolute;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transition: background .5s;
-moz-transition: background .5s;
-webkit-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
border: 3px solid #FFFFFF;
}
.item:hover {
background: #eee
}
.item1 {
z-index: 1;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
width: 134px;
height: 134px;
}
.item2 {
z-index: 2;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
width: 150px;
height: 150px;
}
.item3 {
z-index: 3;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
width: 150px;
height: 150px;
}
.item4 {
z-index: 4;
transform: rotate(240deg);
-moz-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
width: 152px;
height: 152px;
}
.item5 {
z-index: 5;
transform: rotate(300deg);
-moz-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 151px;
height: 151px;
}
.item6 {
border: none;
position: absolute;
z-index: 6;
transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 140px;
height: 140px;
}
#wrapper6 {
position: absolute;
width: 160px;
height: 160px;
/*overflow: hidden;*/
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
/*border: 2px solid #FFFFFF;*/
}
.item1 .content {
left: 0px;
top: 17px;
transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.item2 .content {
left: -5px;
top: 31px;
transform: rotate(-59deg);
-moz-transform: rotate(-59deg);
-webkit-transform: rotate(-59deg);
}
.item3 .content {
left: -40px;
top: 8px;
transform: rotate(-237deg);
-moz-transform: rotate(-237deg);
-webkit-transform: rotate(-237deg);
}
.item4 .content {
left: -43px;
top: 4px;
transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-webkit-transform: rotate(-240deg);
}
.item5 .content {
left: -52px;
top: 7px;
transform: rotate(-247deg);
-moz-transform: rotate(-247deg);
-webkit-transform: rotate(-247deg);
}
.item6 .content {
left: 26px;
top: -3px;
transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-webkit-transform: rotate(-29deg);
}
.content, .content a {
width: 100%;
height: 100%;
text-align: center
}
.content {
position: absolute;
}
.content a {
line-height: 100px;
display: block;
position: absolute;
text-decoration: none;
font-family: 'Segoe UI', Arial, Verdana, sans-serif;
font-size: 12px;
/*text-shadow: 1px 1px #eee;
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff*/
}
.display-target {
display: none;
text-align: center;
opacity: 0;
}
.display-target:target {
display: block;
opacity: 1;
animation: fade-in 1s;
-moz-animation: fade-in 1s;
-webkit-animation: fade-in 1s;
-o-animation: fade-in 1s;
-ms-animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-webkit-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-o-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
I need get the six borders like this image :
Help, please!
Your border-radius was defined in px instead of %
JSfiddle
#menu {
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
This is the reason it's not being a circle in Chrome:
border-radius: 155px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
You're defining a different border radius for Webkit and Mozilla than for everyone else. Use the same value in all three styles.
Also:
border-radius: 50%;
...will get you a circle no matter the size of the element.