So I have a rotating pyramid which has text and a button on each face, but the buttons are unresponsive due to overlapping divs.
Is there any way to make the buttons clickable in the rotating pyramid ?
-sorry for the ugly code, it's only a prototype.
body {
padding-top: 230px;
}
.tetra {
position: relative;
transform-origin: 50% 56%;
width: 700px;
padding-bottom: 606.21px;
/* height of equilateral triangle = sin60° * width */
margin: 0 auto;
transform-style: preserve-3d;
transition: transform 1s;
}
.tetra div {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
transform-style: preserve-3d;
-webkit-clip-path: polygon(50% 0, 100% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}
/* Rotation of –109.5° is angle(C, M[AB], D), per http://www.f-lohmueller.de/pov_tut/geo/geom_200e.htm, 180° – atan(2 * sqrt(2)) ≈ 109.5° */
.tetra .face2 {
transform-origin: 0% 100%;
transform: rotate(-60deg) rotatex(-109.5deg);
background: rgb(190, 0, 0);
}
.tetra .face3 {
transform-origin: 100% 100%;
transform: rotate(60deg) rotatex(-109.5deg);
background-color:blue;
}
.tetra .face4 {
transform-origin: 50% 100%;
transform: rotate(180deg) rotatex(-109.5deg);
background: rgb(76, 190, 0);
}
.tetra .face4 p {
transform: scale(-1, 1);
top: 60%;
left: 50%;
text-align: center;
width: 93px;
margin: 0px;
position: relative;
font-size: 30px;
position: relative;
font-weight: bold;
}
.tetra .face2 p {
transform: scale(-1, 1);
font-size: 30px;
text-align: center;
top: 60%;
left: 50%;
position: relative;
width: 93px;
margin: 0px;
font-weight: bold;
}
.tetra .face3 p {
transform: scale(-1, 1);
font-size: 30px;
text-align: center;
top: 60%;
left: 45%;
position: relative;
width: 40%;
font-weight: bold;
}
#keyframes rotate {
0% {
transform: rotatex(90deg) rotateY(0deg) rotatez(0deg);
}
100% {
transform: rotatex(90deg) rotateY(0deg) rotatez(360deg);
}
}
<html>
<head>
<link rel="stylesheet" href="pyramid.css">
</head>
<div style="height:100px;" onmousedown="spin()">
<div class="tetra">
<div class="face1"></div>
<div class="face2">
<p>TEXTFACE2<button onclick="window.Open(cube.html)">buttonface2</button></p>
</div>
<div class="face4">
<p>TEXTFACE3<button onclick="window.Open(cube.html)">buttonface4</button></p>
</div>
<div class="face3" "><p>TEXTFACE3<button onclick="window.Open(cube.html) "">buttonface3</button>
</p>
</div>
</div>
</div>
<script>
let rotation = 0;
function spin() {
const collection = document.getElementsByClassName("tetra");
collection[0].style.transform = "rotatex(90deg) rotateY(0deg) rotateZ(" + rotation + "deg)";
rotation = rotation + 120;
}
</script>
<style>
.tetra {
transform: rotatex(90deg) rotateY(0deg) rotatez(0deg);
}
</style>
</html>
Related
For a movie website I have a moving background with a grain texture to create a movie vibe.
Later in the website I want to have a :hover input, but because of the grain background it doesn't seem to work.
The background will be attached to the section and when you hover over the div with the class hover, the content from the test div need to be show up.
This is my HTML and CSS:
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section:after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
}
.test {
display: none;
color: white;
}
.hover:hover+.test {
display: block;
}
<section class="section">
<div class="hover">
</div>
<div class="test">test</div>
</section>
Here is the JSFiddle:
https://jsfiddle.net/g8dhz14j/3/
When I try the code without the .section:after, the code works. Can someone help out?
Add pointer-events: none; to the .section::after rules.
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section::after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
z-index: 0;
pointer-events: none;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
}
.blue {
display: none;
color: white;
}
.hover:hover+.blue {
display: block;
}
<section class="section">
<div class="hover">
</div>
<div class="blue">THIS IS A TEST</div>
</section>
The :after pseudo element is on top of the .hover element. You can change that by using z-index:
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section:after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 1;
}
.test {
display: none;
color: white;
}
.hover:hover + .test {
display: block;
}
<section class="section">
<div class="hover"></div>
<div class="test">THIS IS A TEST</div>
</section>
I'm trying to create a "3 photo cube" with cube effect rotating.
Found a very helpful codepen which created the cube with 4 sides and did the rotating and stopping by side which was exactly what i wanted.
Issue here is that i need the cube to show just 3 sides not 4 and when i remove one of them, it still rotates on that side.
I thought i should just "match" top side bottom side so the back side doesn't show but it seems i am having a little knowledge at understanding how the positioning works.
see the below snippet.
.scene {
width: 416px;
height: 500px;
margin: 75px auto 0;
perspective: 1200px;
}
.cube {
position: relative;
width: 416px;
height: 500px;
transform-style: preserve-3d;
transform: translateZ(0px) rotateX(150deg);
animation: example 15s linear infinite;
}
.side {
position: absolute;
width: 416px;
height: 500px;
box-sizing: border-box;
background-color: #999;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 120px 0;
font: 50px/1 'Trebuchet MS', sans-serif;
color: #fff;
text-transform: uppercase;
text-align: center;
}
.side::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.15);
}
.side span {
position: relative;
}
.guides {
position: absolute;
top: 0;
left: 50px;
width: 200px;
height: 100%;
border-style: dotted;
border-width: 0 1px;
color: rgba(255, 255, 255, 0.6);
}
.guides::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
border-left: 1px dotted;
}
.back {
transform: translateZ(-250px) rotateX(180deg);
}
.bottom {
transform: translateY(250px) rotateX(270deg);
}
.front {
transform: translateZ(250px);
}
.top {
background-image: url(https://askd.github.io/codepen/top.jpg);
}
.back {
background-image: url(http://keit.rezsolution.com/wp-content/uploads/2019/07/rimodelimi-i-hundes-galeri.jpg);
}
.bottom {
background-image: url(http://keit.rezsolution.com/wp-content/uploads/2019/07/foto-galeri-zmadhimi-i-gjoksit.jpg);
}
.front {
background-image: url(http://keit.rezsolution.com/wp-content/uploads/2019/07/barku-home.jpg);
}
#keyframes example {
0% { transform: translateZ(-150px) rotateX(0deg); }
15% { transform: translateZ(-150px) rotateX(90deg); }
25% { transform: translateZ(-150px) rotateX(90deg); }
40% { transform: translateZ(-150px) rotateX(180deg); }
50% { transform: translateZ(-150px) rotateX(180deg); }
65% { transform: translateZ(-150px) rotateX(270deg); }
75% { transform: translateZ(-150px) rotateX(270deg); }
90% { transform: translateZ(-150px) rotateX(360deg); }
100% { transform: translateZ(-150px) rotateX(360deg); }
}
<div class="scene">
<div class="cube">
<div class="side back">
<span>BACK</span>
</div>
<div class="side bottom">
<span>BOTTOM</span>
</div>
<div class="side front">
<span>FRONT</span>
</div>
</div>
</div>
Anybody can give me some directions on how to approach this issue?
Any help is appreciated
I made a working exemple of a rotating prism (Y axis) here.
And the same on the X axis here.
There are 2 things to figure out, the distance to translate each face and the rotation angle.
The distance bring back to trigonometry which made my brain hurt a little, but to make it simple, in this case you get it by doing : translationDistance = (faceWidth/2) / tan(30).See this article by David DeSandro for more explanations.
In my code :
--cotetriangle: 200px;
/* r = 100 / tan(30) = 57.7 */
--translationDistance: 58px;
The angle of rotation is easy, 3 faces, 360deg -> 120deg for each rotation.
Which gives you :
.triangle-face-front {
background: rgb(71, 71, 136);
transform: translate3d(0, 0, var(--translationDistance));
}
.triangle-face-left {
background: rgb(90, 233, 77);
transform: rotateY(-120deg) translate3d(0, 0, var(--translationDistance));
}
.triangle-face-right {
background: black;
transform: rotateY(120deg) translate3d(0, 0, var(--translationDistance));
}
I did a little 'pausing' animation as you suggested :
#keyframes rotateTriangle {
0% {
transform: rotateY(0deg);
}
24%,34%{
transform: rotateY(120deg);
}
58%,67%{
transform: rotateY(240deg);
}
91%, 100% {
transform: rotateY(360deg);
}
To switch between a lateral rotation (code above) and a frontal rotation, you just need to replace rotateY by rotateX
To understand better CSS 3D, I encourage you to read those 2 articles :
Intro to CSS 3D transforms by David DeSandro
Creating a 3D Cube Image Gallery by Kushagra Gour
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'm trying to get this circle loader working properly but having difficulty. I can do some basic animations, but this code which I found on CodePen is a bit above my pay-grade. I'm trying to use it to understand what's happening.
My objective is that the loader doesn't go all the way around the circumference of the circle. Say, only 68% of the way and stops. Or 98%. But I'm thus far unable to locate the property/value which determines how far the loader goes around the circle.
I've tried manipulating the keyframes on the right loader class to no avail as well as the transform-origin property. No dice.
Code:
#circle-loader-wrap {
overflow: hidden;
position: relative;
margin-top: -10px;
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
background-color: blue;
border-radius: 200px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
#circle-loader-wrap:after {
content: '';
position: absolute;
left: 15px;
top: 15px;
width: 170px;
height: 170px;
border-radius: 50%;
background-color: green;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#circle-loader-wrap div {
overflow: hidden;
position: absolute;
width: 50%;
height: 100%;
}
#circle-loader-wrap .loader {
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
border-radius: 1000px;
background-color: pink;
}
#circle-loader-wrap .left-wrap {
left: 0;
}
#circle-loader-wrap .left-wrap .loader {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transform-origin: 0 50% 0;
-webkit-transform-origin: 0 50% 0;
animation: loading-left 20s infinite linear;
-webkit-animation: loading-left 20s infinite linear;
}
#circle-loader-wrap .right-wrap {
left: 50%;
}
#circle-loader-wrap .right-wrap .loader {
left: -100%;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
transform-origin: 100% 50% 0;
-webkit-transform-origin: 100% 50% 0;
animation: loading-right 20s infinite linear;
-webkit-animation: loading-right 20s infinite linear;
}
#keyframes loading-left {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes loading-left {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(180deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes loading-right {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes loading-right {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
<div class="container mt-5">
<div class="row">
<div class="col-3">
<div id="circle-loader-wrap">
<div class="left-wrap">
<div class="loader"></div>
</div>
<div class="right-wrap">
<div class="loader"></div>
</div>
</div>
</div>
</div>
</div>
I am pasting a snippet below which does what you want.
I have written my explanation of what's going on directly into the code comments next to the css rules that are doing the corresponding animation.
In case anything is still unclear, post a comment.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
#circle-loader-wrap {
overflow: hidden;
position: relative;
margin-top: -10px;
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
background-color: blue;
border-radius: 200px;
transform: rotate(180deg);
}
#circle-loader-wrap:after {
content: '';
position: absolute;
left: 15px;
top: 15px;
width: 170px;
height: 170px;
border-radius: 50%;
background-color: green;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#circle-loader-wrap div {
overflow: hidden;
position: absolute;
width: 50%;
height: 100%;
}
#circle-loader-wrap .loader {
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
border-radius: 1000px;
background-color: pink;
}
#circle-loader-wrap .left-wrap {
left: 0;
}
#circle-loader-wrap .left-wrap .loader {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transform-origin: 0 50% 0;
animation: loading-left 5s infinite linear;
}
#circle-loader-wrap .right-wrap {
left: 50%;
}
#circle-loader-wrap .right-wrap .loader {
left: -100%;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
transform-origin: 100% 50% 0;
animation: loading-right 5s infinite linear;
}
#keyframes loading-left {
0% {
transform: rotate(0deg);
}
25%, 100% {
transform: rotate(180deg);
}
}
#keyframes loading-right {
0%, 25% {
transform: rotate(0deg);
}
50%, 100% {
/* the following is for the second half of the cicrle */
/* 180deg means one half of the cicle or 50% of the cicle */
/* So, 1% is gonna be 180/50 = 3.6deg */
/* If you want 68%, then you have 18% left for the second half of the circle */
/* To get 18%: 18x3.6 = 64.8deg */
transform: rotate(64.8deg);
/* Note: The transformation will happen between 25% and 50% of the total time which is 5 seconds in this case; So, it's gonna take 1.25 seconds. */
/* In other words, it will take the same amount of time as for the first half of the circle which will make the transformation in the second half appear to be slower because it has the same time to cover a much shorter distance */
/* Between 50% and 100% nothing happens. */
/* That's your "pause" in this animation although technically it's not a pause. */
}
}
</style>
<div class="container mt-1">
<div class="row">
<div class="col">
<p>68% in this case:</p>
<div id="circle-loader-wrap">
<div class="left-wrap">
<div class="loader"></div>
</div>
<div class="right-wrap">
<div class="loader"></div>
</div>
</div>
<p>The comments next to the corresponding css rules show how to adjust.</p>
</div>
</div>
</div>
Also note: I ripped out the vendor prefixes because you don't really need those nowadays for those css rules.
I am running into an issue in my mobile media query - anything under a 640px viewport. I have a circle that comes together and forms a full circle (see snippet), but for some reason in my media query, the circle doesn't quite line up, and I am unsure why as I am using the same math that makes it work in a desktop version.
Here is what it looks like within the 640 media query:
So how this works is I give .circle the same height and width. So let's say 200px for both height and width.
Then the class of .spinner, I divide the height and width of the .circle by two. So I would have 125px for height and width.
Then I set the border size, so lets use 5px. What I do is add that border size to the height and width numbers of .spinner and use that figure, which would be 130px to everything else ranging from .top, .bottom, q2, mask, etc.
That is how I get this to work and my math in my media query is not wrong. Does anyone see why this isn't lining up?
.blue {
background-color: blue;
width: 100%;
height: 600px;
}
.circle {
z-index: 99;
width: 500px;
height: 500px;
position: absolute;
background: inherit;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 250px;
height: 250px;
position: absolute;
border: 5px solid #b5f2ff;
z-index: 10;
}
.top {
top: 255px;
left: 255px;
border-radius: 0 0 255px 0;
border-left: none;
border-top: none;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.bottom {
border-radius: 255px 0 0 0;
border-bottom: none;
border-right: none;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.topright,
.bottomleft {
-webkit-animation: rotate90 4s linear forwards;
animation: rotate90 4s linear forwards;
}
.topleft,
.bottomright {
-webkit-animation: rotate180 4s linear forwards;
animation: rotate180 4s linear forwards;
}
.mask {
width: 255px;
height: 255px;
position: absolute;
opacity: 1;
background: inherit;
z-index: 15;
-webkit-animation: mask 4s linear forwards;
animation: mask 4s linear forwards;
}
.q2 {
top: 0;
left: 0;
}
.q4 {
top: 255px;
left: 255px;
}
#-webkit-keyframes rotate90 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20%,
80% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate90 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20%,
80% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes rotate180 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40%,
60% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate180 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40%,
60% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes mask {
0% {
z-index: 15
}
40%,
60% {
z-index: 4
}
100% {
z-index: 15
}
}
#keyframes mask {
0% {
z-index: 15
}
40%,
60% {
z-index: 4
}
100% {
z-index: 15
}
}
#circle-text {
display: none;
position: absolute;
color: #FFF;
font-size: 2.3em;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
}
#media screen and (max-width:640px) {
.circle {
z-index: 100;
width: 250px;
height: 250px;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 125px;
height: 125px;
z-index: 10;
}
.top {
top: 130px;
left: 130px;
border-radius: 0 0 130px 0;
}
.bottom {
border-radius: 130px 0 0 0;
}
.mask {
width: 130px;
height: 130px;
}
.q4 {
top: 130px;
left: 130px;
}
}
<div class="blue">
<div class="circle">
<div class="spinner top topright"></div>
<div class="spinner top topleft"></div>
<div class="spinner bottom bottomleft"></div>
<div class="spinner bottom bottomright"></div>
<div class="mask q2"></div>
<div class="mask q4"></div>
</div>
</div>
You have an inconsistent use of box-sizing:border-box in your CSS. It's being used in media queries, so that it doesn't apply to all screen sizes. And it would mess up your calculations.