I have created a 3d cube using CSS, now i want to rotate that cube on my HTML page. My problem is the when the cube rotates, it also moves to the sides, i need it to stay in place and rotate.
i've tried changing the posistion of my div to relative, which scattered the cube sides and still made it rotate to the sides.
I believe the problem has something to do with the transform-origin, however no matter how i change the values it doesn't help.
.spinner div {
position: absolute;
display: inline-block;
width: 300px;
height: 300px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 100px;
}
.spinner .face1 {
transform: translateZ(150px);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg) translateZ(150px);
background-color: rgb(184, 187, 31);
}
.spinner .face3 {
transform: rotateY(180deg) translateZ(150px);
background-color: green;
}
.spinner .face4 {
transform: rotateY(-90deg) translateZ(150px);
background-color: red;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
transform-origin: 50% 0;
}
.center-screen {
display: flex;
flex-direction: column;
justify-content: top;
align-items: top;
text-align: center;
margin-top: 10%;
margin-left: 40%;
}
#keyframes spincube {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg)
}
}
<body>
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
</body>
as described i expected the cube to stay in place but it slides out to the side.
I would re adjust the transformation like below to make sure the slides are around the center of the main element which is an empty element.
Note the use of translateX to achieve the needed effect.
.spinner div {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 80px;
}
.spinner .face1 {
transform: translateZ(50px) translateX(-50%);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg);
background-color: rgb(184, 187, 31);
}
.spinner .face3 {
transform: translateZ(-50px) translateX(-50%) rotateY(180deg) ;
background-color: green;
}
.spinner .face4 {
transform: translateX(-100%) rotateY(-90deg);
background-color: red;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
display: inline-block; /* This is important !!*/
outline: 5px solid red; /* to illustrate */
}
.center-screen {
text-align: center;
margin-top: 10%;
}
#keyframes spincube {
to {
transform: rotateY(-360deg)
}
}
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
You can also rely on left to handle this:
.spinner div {
position: absolute;
width: 100px;
left:-50px;
height: 100px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 80px;
}
.spinner .face1 {
transform: translateZ(50px);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg);
background-color: rgb(184, 187, 31);
left:0;
}
.spinner .face3 {
transform: translateZ(-50px) rotateY(180deg) ;
background-color: green;
}
.spinner .face4 {
transform:rotateY(-90deg);
background-color: red;
left:-100px;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
display: inline-block; /* This is important !!*/
outline: 5px solid red; /* to illustrate */
position:relative;
}
.center-screen {
text-align: center;
margin-top: 10%;
}
#keyframes spincube {
to {
transform: rotateY(-360deg)
}
}
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
You could do something like this:
Credits: https://codepen.io/bcgwebdesign/pen/gRXxxR?editors=0100
Tip: There are a lot of demos of this kind on Codepen
/* keyframes for rotating animation */
#-webkit-keyframes spinX {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
#-webkit-keyframes spinBoth {
from { transform: rotateY(0) rotateX(0); }
to { transform: rotateY(360deg) rotateX(0deg) ; }
}
#-webkit-keyframes spinY {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }
}
#-webkit-keyframes recolor {
0% { background: rgba(0,255,0,0.1); }
33% { background: rgba(255,0,0,0.1); }
66% { background: rgba(0,0,255,0.1); }
}
/* scene wrapper */
.wrapper{
height: 300px;
margin-top:0;
position:relative;
perspective: 1000px;
perspective-origin: 50% -50px;
}
/* cube wrapper */
.cube {
position: relative;
margin: 200px auto;
width: 200px;
transform-style: preserve-3d;
animation: spinBoth 5s infinite ease-in-out;
transition: all 1s linear;
}
/* outer cube */
b {
position:absolute;
width:200px;
height:200px;
display:block;
background:rgba(255,0,0,0.1);
box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
font-size:20px;
text-align:center;
line-height:200px;
color:rgba(0,0,0,0.5);
font-family:sans-serif;
text-transform:uppercase;
transition: all 1s linear;
}
b.back{
transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
}
b.right{
transform:translateY(-100px) rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
b.left{
transform:translateY(-100px)rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
b.top{
transform:rotateX(-90deg) translateY(-100px) translateZ(-100px);
transform-origin: top center;
}
b.bottom{
transform:rotateX(90deg) translateY(100px) translateZ(100px);
transform-origin: bottom center;
}
b.front{
transform: translateZ(100px) translateY(-100px);
}
<div class="wrapper">
<div class="cube">
<b class="front">front</b>
<b class="back">back</b>
<b class="top">top</b>
<b class="bottom">bottom</b>
<b class="left">left</b>
<b class="right">right</b>
</div>
</div>
Related
I'm trying to animate the faces of an isometric cube I've created using CSS transforms to create an 'unpacking/unfolding' effect.
I want the lid of the cube to rotate upwards but at the moment it floats off rather than rotates from the edge. It starts and ends in the right places. I've tried changing the transform-origin property but it doesn't make a difference. Here's my code so far:
https://jsfiddle.net/wrgt1/5yrLjnw3/38/
html body {
position: relative;
height: 100vh;
width: 100vw;
background-color: #C4C5C4;
}
.front,
.back {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.front {
z-index: 99;
}
.cube {
transform-style: preserve-3d;
transform: rotateX(-35deg) rotateY(45deg);
}
.face {
position: absolute;
width: 30vh;
height: 30vh;
background: white;
border: solid 1px blue;
}
.top {
transform-origin: 100% 100%;
transform: rotateX(90deg) rotateY(0deg) translate3d(15vh, 0, 15vh);
animation: rotatelid 5s linear infinite alternate;
}
.frontleft {
transform: rotateY(-90deg) translate3d(0, 0, 15vh);
}
.frontright {
transform: translate3d(0, 0, 15vh);
}
.backleft {
transform: translate3d(0, 0, -15vh);
background: lightgrey;
}
.backright {
transform: rotateY(-90deg) translate3d(0, 0, -15vh);
}
#keyframes rotatelid {
from {
transform: rotateX(90deg) rotateY(0deg) translate3d(15vh, 0, 15vh);
}
to {
transform: rotateX(90deg) rotateY(90deg) translate3d(-15vh, 0vh, 15vh);
}
}
<div class='front'>
<div class='cube'>
<div class='face top'></div>
<div class='face frontleft'></div>
<div class='face frontright'></div>
</div>
</div>
<div class='back'>
<div class='cube'>
<div class='face backleft'></div>
<div class='face backright'></div>
</div>
</div>
Does anyone know how to solve this problem, or if there's a better way to create simple animations on the web (possibly using SVGs?).
Update the order of your transformation to first translate the element then rotate it. Pay attention to the translation because it's no more the same when added first.
html body {
position: relative;
height: 100vh;
margin:0;
background-color: #C4C5C4;
}
.front,
.back {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.front {
z-index: 99;
}
.cube {
transform-style: preserve-3d;
transform: rotateX(-35deg) rotateY(45deg);
}
.face {
position: absolute;
width: 30vh;
height: 30vh;
background: white;
border: solid 1px blue;
box-sizing:border-box;
}
.top {
transform-origin: 100% 100%;
transform: translate3d(15vh, -15vh, 0vh) rotateX(90deg) rotateY(0deg);
animation: rotatelid 5s linear infinite alternate;
}
.frontleft {
transform: rotateY(-90deg) translate3d(0, 0, 15vh);
}
.frontright {
transform: translate3d(0, 0, 15vh);
}
.backleft {
transform: translate3d(0, 0, -15vh);
background: lightgrey;
}
.backright {
transform: rotateY(-90deg) translate3d(0, 0, -15vh);
}
#keyframes rotatelid {
from {
transform:translate3d(15vh, -15vh, 0vh) rotateX(90deg) rotateY(0deg);
}
to {
transform:translate3d(15vh, -15vh, 0vh) rotateX(90deg) rotateY(90deg);
}
}
<div class='front'>
<div class='cube'>
<div class='face top'></div>
<div class='face frontleft'></div>
<div class='face frontright'></div>
</div>
</div>
<div class='back'>
<div class='cube'>
<div class='face backleft'></div>
<div class='face backright'></div>
</div>
</div>
What I'm trying to achieve is the transition of the page like on this webpage - http://ejosue.com/.
So far what I have done is created a cube with an on hover effect which works pretty much like on the website. Now however I have a problem with making the cube fill the entire screen (like on the referenced webpage).
Here's the JSfiddle - https://jsfiddle.net/definaly/31zr05y7/48/
And the code on this page
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 200px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.cube:hover{
animation: pageDown 1.5s linear forwards;
}
#keyframes pageDown{
25%{
transform: scale(0.8);
}
75%{
transform: rotateX(90deg);
}
100%{
transform: scale(1);
transform: rotateX(90deg);
}
}
.cube__face {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid black;
/* Optional Styling */
line-height: 200px;
font-size: 30px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front {
background: hsla( 0, 100%, 50%, 1);
}
.cube__face--bottom {
background: hsla(300, 100%, 50%, 1);
}
.cube__face--front {
transform: rotateY(0deg) translateZ(100px);
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(100px);
}
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">entry page</div>
<div class="cube__face cube__face--bottom">extra page</div>
</div>
</div>
Simply make the scene element 100vh and consider 50vh inside the translation. Also remove the width to have the default full width:
body { font-family: sans-serif;margin:0; } /* Remove the default margin */
* {
box-sizing:border-box; /* to make sure there is no overflow*/
}
.scene {
height: 100vh;
}
.cube {
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.cube:hover{
animation: pageDown 1.5s linear forwards;
}
#keyframes pageDown{
25%{
transform: scale(0.8);
}
75%{
transform: rotateX(90deg);
}
100%{
transform: scale(1);
transform: rotateX(90deg);
}
}
.cube__face {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid black;
/* Optional Styling */
line-height: 200px;
font-size: 30px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front {
background: hsla( 0, 100%, 50%, 1);
}
.cube__face--bottom {
background: hsla(300, 100%, 50%, 1);
}
.cube__face--front {
transform: rotateY(0deg) translateZ(50vh);
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(50vh);
}
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">entry page</div>
<div class="cube__face cube__face--bottom">extra page</div>
</div>
</div>
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.
When giving e.g. a <div> a box-shadow as well as rotating it will cause a rotation of the box-shadow direction - which is problematic when the box-shadow should create an illusion of lighting.
Example: https://jsfiddle.net/5h7z4swk/
div {
width: 50px;
height: 50px;
margin: 20px;
box-shadow: 10px 10px 10px #000;
display: inline-block;
}
#box1 {
background-color: #b00;
}
#box2 {
background-color: #0b0;
transform: rotate(30deg);
}
#box3 {
background-color: #00b;
transform: rotate(60deg);
}
#box4 {
background-color: #b0b;
transform: rotate(90deg);
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#box6 {
background-color: #0bb;
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
}
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box6"></div>
The answer to this problem should look similar to this mock up:
How can I rotate a <div> and still keep the box-shadow going the same direction?
The solution should be pure CSS...
Note: The animation in the CSS is for demonstration purposes. The use case will use JavaScript to set the rotation. But the JavaScript will know nothing about the box-shadow as it is in the responsibility of the design to define a (or many...) shadows. That's why it should be a pure CSS solution.
Keeping direction of an offset box-shadow consistent during rotation is simple with CSS transforms.
This approach relies on the fact that the transform origin is moved with the transforms. This means that when several transforms are set on the same element, the coordinate system of each transform changes according to the previous ones.
In the following example, the blue element is a pseudo element and the shadow is the div element:
div {
width: 40px; height: 40px;
margin: 40px;
box-shadow: 0px 0px 10px 5px #000;
animation: spinShadow 2s infinite;
background-color: #000;
}
#keyframes spinShadow {
to { transform: rotate(360deg); }
}
div:before {
content: '';
position: absolute;
left:-5px; top:-5px;
width: 50px; height: 50px;
transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
animation:inherit;
animation-name: spinElt;
background-color: #0bb;
}
#keyframes spinElt {
to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}
<div></div>
Explanation of the transition property on the pseudo element (See the following code snippet for an illustration of the steps):
transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg)
rotate(-360deg) counters the rotation of the parent to make the pseudo element static.
translate(-10px, -10px) the pseudo element is translated to make the shadow offset
rotate(360deg) the pseudo element is rotated in the same direction as parent
div {
width: 40px; height: 40px;
margin: 40px;
box-shadow: 0px 0px 10px 5px #000;
animation: spinShadow 2s infinite;
background-color: #000;
}
#keyframes spinShadow {
to { transform: rotate(360deg); }
}
div:before {
content: '';
position: absolute;
left:-5px; top:-5px;
width: 50px; height: 50px;
animation:inherit;
background-color: #0bb;
}
#first:before{
transform: rotate(0deg);
animation-name: first;
}
#keyframes first {
to { transform: rotate(-360deg); }
}
#second:before{
transform: rotate(0deg) translate(-10px, -10px);
animation-name: second;
}
#keyframes second {
to { transform: rotate(-360deg) translate(-10px, -10px); }
}
#complete:before{
transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
animation-name: complete;
}
#keyframes complete {
to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}
<ol>
<li>Counter rotate:<div id="first"></div></li>
<li>Translate :<div id="second"></div></li>
<li>Rotate:<div id="complete"></div></li>
<ol>
You could as well integrate box-shadow direction inside animation frames:
div {
display: inline-block;
margin: 1em ;
height: 50px;
width: 50px;
box-shadow: 15px 15px 15px 5px gray;
animation: rte 5s infinite linear;
}
.red {
background: red
}
.green {
background: green;
animation-delay:2s;
}
.blue {
background: blue;
animation-delay:4s;
}
.bob {
background: #b0b;
animation-delay:6s;
}
.cyan {
background: cyan;
animation-delay:8s;
}
#keyframes rte {
25% {
box-shadow: 15px -15px 15px 5px gray;
}
50% {
box-shadow: -15px -15px 15px 5px gray;
}
75% {
box-shadow: -15px 15px 15px 5px gray;
}
100% {
transform: rotate(360deg);
}
}
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="bob"></div>
<div class="cyan"></div>
Inspired by the other answers I created my own answer as well:
https://jsfiddle.net/zoxgbcrg/1/
.shadow {
background-color: black !important;
width: 40px;
height: 40px;
box-shadow: 0px 0px 10px 5px #000;
margin-top: 35px;
margin-left: 35px;
position: absolute;
z-index: -1;
}
<div class="box1 shadow"></div><div class="box1"></div>
The trick is also to create an additional <div> to handle the shadow. In my case it's not a :before but a real DOM element that is moved by margin.
Note: it seems that of today (31.01.2016) Firefox and Chrome have a subtile rendering difference. So for Firefox https://jsfiddle.net/zoxgbcrg/ is creating the desired result, for Chrome I suggest https://jsfiddle.net/zoxgbcrg/1/
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.