CSS weird artifacts when using clip path in conjuction with custom animation - html

I am currently working on a small website. Since I am not familiar with html / css, I am mostly just trying out a few things. I wanted to get a small rocket flying through space animated using css.
I quickly copied the relevant part of my code to JSFiddle.
Basically I have a somewhat straight forward setup. I have a .rocket-div which simply contains my rocket and will eventually also contain other elements like stars. Within that, I have my .rocket which has a shake animation. Within the .rocket, I have 3 body elements as well as a small window.
.rocket-div{
position: relative;
}
.rocket{
position: absolute;
animation: shake 1s infinite;
}
.rocket-element{
position: absolute;
background-color: white;
}
.rocket-body-1{
width: 30px;
height: 80px;
left: 0px;
top: 10px;
clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
}
.rocket-body-2{
width: 30px;
height: 100px;
left: 40px;
}
.rocket-body-3{
width: 160px;
height: 100px;
left: 80px;
border-top-right-radius: 80px 50px;
border-bottom-right-radius: 80px 50px;
}
.rocket-window{
width: 52px;
height: 52px;
left: 160px;
top: 24px;
border-radius: 26px;
/*border-width: 5px;*/
border: black solid 8px;
/*border-color: black;*/
background-color: white;
}
#keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
As you can see, I have defined the shape of the first rocket-body-1 as:
clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
This leads to weirdly looking artifacts together with the shaking animation.
What solution would there be for my problem? I am very happy for any help.


Like mentioned on the comments, i think this has something to do with the browser. I can't see the problem on Chrome, but i can see it on firefox.
I have created a small example for you, where i have added border: 1px solid black to the .rocket.body.1 element. This seems to fix the problem also on firefox
:root body {
background-color: #000000;
}
.rocket-div {
position: relative;
}
.rocket {
position: absolute;
animation: shake 10s infinite;
}
.rocket-element {
position: absolute;
background-color: white;
}
.rocket-body-1 {
width: 30px;
height: 80px;
left: 0px;
top: 10px;
clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
border: 1px solid black;
}
.rocket-body-2 {
width: 30px;
height: 100px;
left: 40px;
}
.rocket-body-3 {
width: 160px;
height: 100px;
left: 80px;
border-top-right-radius: 80px 50px;
border-bottom-right-radius: 80px 50px;
}
.rocket-window {
width: 52px;
height: 52px;
left: 160px;
top: 24px;
border-radius: 26px;
background-color: black
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<body>
<div class="rocket-div" style="height: 200px; width: calc(min(500px, 100%));">
<div class="rocket">
<div class="rocket-element rocket-body-1"></div>
<div class="rocket-element rocket-body-2"></div>
<div class="rocket-element rocket-body-3"></div>
<div class="rocket-element rocket-window"></div>
</div>
</div>
</body>

Related

How do I centralize the text inside a button

I'm building my new website on SquareSpace, and wanted something a bit more fancy for my landing page.
I got this button here ("Button 49," from https://getcssscan.com/css-buttons-examples).
My problem now is getting the text centered and being able to adjust the size.
I tried this text-align but nothing changed, also tried to mess with the line-height but thinks just got funky; and for the size of the button, I can mess with the inputs there but if I do that with the text not centred it gets weird.
I'm using a custom font, but you can use Arial to visualize.
Any help is welcome, I don't know code language or how to explain my problem, but thanks for reading.
As you can see on the image, there is a something wrong on the red circle and the text seems a bit down IMAGE OF BUTTON
Here's my current code:
button,
button::after {
width: 380px;
height: 86px;
font-size: 36px;
font-family: 'Industry Inc Base';
background: linear-gradient(45deg, transparent 5%, #fff 5%);
border: 0;
color: #000;
letter-spacing: 3px;
text-align: center;
line-height: 80px;
box-shadow: 8px 0px 0px #282828;
outline: transparent;
position: relative;
}
button::after {
--slice-0: inset(50% 50% 50% 50%);
--slice-1: inset(80% -6px 0 0);
--slice-2: inset(50% -6px 30% 0);
--slice-3: inset(10% -6px 85% 0);
--slice-4: inset(40% -6px 43% 0);
--slice-5: inset(80% -6px 5% 0);
content: 'ENTER';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 3%, #FF5E1A 3%, #7b00ff 5%, #FF5E1A 5%);
text-shadow: -3px -3px 0px #7b00ff, 3px 3px 0px #FF5E1A;
clip-path: var(--slice-0);
}
button:hover::after {
animation: 1s glitch;
animation-timing-function: steps(2, end);
}
#keyframes glitch {
0% {
clip-path: var(--slice-1);
transform: translate(-20px, -10px);
}
10% {
clip-path: var(--slice-3);
transform: translate(10px, 10px);
}
20% {
clip-path: var(--slice-1);
transform: translate(-10px, 10px);
}
30% {
clip-path: var(--slice-3);
transform: translate(0px, 5px);
}
40% {
clip-path: var(--slice-2);
transform: translate(-5px, 0px);
}
50% {
clip-path: var(--slice-3);
transform: translate(5px, 0px);
}
60% {
clip-path: var(--slice-4);
transform: translate(5px, 10px);
}
70% {
clip-path: var(--slice-2);
transform: translate(-10px, 10px);
}
80% {
clip-path: var(--slice-5);
transform: translate(20px, -10px);
}
90% {
clip-path: var(--slice-1);
transform: translate(-10px, 0px);
}
100% {
clip-path: var(--slice-1);
transform: translate(0);
}
}
<p><button class="button">Enter</button></p>

The text 'Enter' is centered inside your button, so that's fine. Text is centered by default inside a button, so you can leave out text-align: center; in your CSS.
One way to center your button on the page is with CSS flex layout. This works by wrapping the content in a flex container (see CSS code below). This can be the p element you first had, but as this is not really a paragraph, I would use a div element.
Concerning the 'glitch text' displaying lower than the button text, this is likely due to the font indeed. I changed it to font-family: 'sans-serif'; and it looks fine to me.
Finally, please note that it is illegal to wrap a button inside anchor tags. You have to put your anchor tags (i.e. your 'link') inside the button tags.
div {
font-family: 'sans-serif';
display: flex;
justify-content: center;
}
button,
button::after {
width: 380px;
height: 86px;
font-size: 36px;
background: linear-gradient(45deg, transparent 5%, #fff 5%);
border: 0;
color: #000;
letter-spacing: 3px;
line-height: 80px;
box-shadow: 8px 0px 0px #282828;
outline: transparent;
position: relative;
}
button::after {
--slice-0: inset(50% 50% 50% 50%);
--slice-1: inset(80% -6px 0 0);
--slice-2: inset(50% -6px 30% 0);
--slice-3: inset(10% -6px 85% 0);
--slice-4: inset(40% -6px 43% 0);
--slice-5: inset(80% -6px 5% 0);
content: 'ENTER';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 3%, #FF5E1A 3%, #7b00ff 5%, #FF5E1A 5%);
text-shadow: -3px -3px 0px #7b00ff, 3px 3px 0px #FF5E1A;
clip-path: var(--slice-0);
}
button:hover::after {
animation: 1s glitch;
animation-timing-function: steps(2, end);
}
#keyframes glitch {
0% {
clip-path: var(--slice-1);
transform: translate(-20px, -10px);
}
10% {
clip-path: var(--slice-3);
transform: translate(10px, 10px);
}
20% {
clip-path: var(--slice-1);
transform: translate(-10px, 10px);
}
30% {
clip-path: var(--slice-3);
transform: translate(0px, 5px);
}
40% {
clip-path: var(--slice-2);
transform: translate(-5px, 0px);
}
50% {
clip-path: var(--slice-3);
transform: translate(5px, 0px);
}
60% {
clip-path: var(--slice-4);
transform: translate(5px, 10px);
}
70% {
clip-path: var(--slice-2);
transform: translate(-10px, 10px);
}
80% {
clip-path: var(--slice-5);
transform: translate(20px, -10px);
}
90% {
clip-path: var(--slice-1);
transform: translate(-10px, 0px);
}
100% {
clip-path: var(--slice-1);
transform: translate(0);
}
}
<div><button class="button">Enter</button></div>

:hover is not working, because of background

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>

Circle Loader going to 100%

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.

Scaling messes up the z-index

I have a set of absolute divs having background images which contains animation.
when i apply scale property to the divs it messes up my z-index totally
here is the link to the fiddle https://jsfiddle.net/kq2soozp/3/ (Uncomment transform:scale() line)
The HTML Code
<div class='me'>
<div class="torso">
<div class="left leg">
<div class="left thigh">
<div class="left shin">
<div class="left foot">
<div class="left toes"></div>
</div>
</div>
</div>
</div>
<div class="right leg">
<div class="right thigh">
<div class="right shin">
<div class="right foot">
<div class="right toes"></div>
</div>
</div>
</div>
</div>
<div class="left arm">
<div class="left bicep">
<div class="left forearm">
<div class="kite"></div>
</div>
</div>
</div>
<div class="right arm">
<div class="right bicep">
<div class="right forearm"></div>
</div>
</div>
</div>
</div>
The CSS
.me,.me div{
background-repeat: no-repeat;
position: absolute;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
//-webkit-transform: scale(0.9);
}
.me{
top: 80px;
left: 350px;
-webkit-animation-name: me;
}
.torso{
height: 274px;
width: 86px;
background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}
.arm{
left: 12px;
-webkit-transform-origin: 20px 10px;
}
.kite{
width: 395px;
height: 424px;
top: -115px;
left: 0px;
background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
-webkit-transform: rotate(45deg) scale(0.6);
}
.right.bicep{
width: 51px;
height: 124px;
background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}
.left.bicep{
width: 52px;
: 126px;
background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}
.left.forearm{
width: 37px;
height: 124px;
background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
-webkit-transform: rotate(-45deg);
}
.right.forearm{
width: 36px;
height: 121px;
background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
-webkit-animation-name: right-forearm;
}
.left.thigh{
width: 69px;
height: 144px;
background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}
.right.thigh{
width: 69px;
height: 144px;
background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}
.shin{
width: 53px;
height: 173px;
background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}
.foot{
width: 67px;
height: 34px;
background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}
.toes{
width: 28px;
height: 25px;
background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}
.right.arm{
top: 93px;
-webkit-animation-name: right-bicep;
}
.left.arm{
top: 87px;
-webkit-transform: rotate(-26deg);
}
.forearm{
top: 108px;
left: 14px;
-webkit-transform-origin: 3px 7px;
}
.leg{
left: 6px;
-webkit-transform-origin: 30px 20px;
-webkit-animation-name: thigh;
}
.right.leg{
top: 235px;
-webkit-animation-name: right-thigh;
}
.left.leg{
top:225px;
-webkit-animation-name: left-thigh;
}
.shin{
top: 115px;
-webkit-transform-origin: 30px 25px;
}
.right.shin {
-webkit-animation-name: right-shin;
}
.left.shin {
-webkit-animation-name: left-shin;
}
.foot{
top: 155px;
left: 2px;
-webkit-transform-origin: 0 50%;
}
.right.foot {
-webkit-animation-name: right-foot;
}
.left.foot {
-webkit-animation-name: left-foot;
}
.toes{
top: 9px;
left: 66px;
-webkit-transform-origin: 0% 100%;
}
.right.toes {
-webkit-animation-name: right-toes;
}
.left.toes {
-webkit-animation-name: left-toes;
}
div.right.arm { z-index: 1; }
div.left.arm { z-index: -3; }
div.arm > div.bicep > div.forearm { z-index: -1; }
div.right.leg { z-index: -1; }
div.left.leg { z-index: -2; }
div.leg > div.thigh > div.shin { z-index: -1; }
#-webkit-keyframes me {
0% { -webkit-transform: rotate(5deg) translate( 10px, 0px); }
25% { -webkit-transform: rotate(5deg) translate(-5px, -14px); }
50% { -webkit-transform: rotate(5deg) translate( 10px, 0px); }
75% { -webkit-transform: rotate(5deg) translate(-5px, -14px); }
100% { -webkit-transform: rotate(5deg) translate( 10px, 0px); }
}
#-webkit-keyframes right-bicep {
0% { -webkit-transform: rotate(26deg); }
50% { -webkit-transform: rotate(-20deg); }
100% { -webkit-transform: rotate(26deg); }
}
/*#-webkit-keyframes left-bicep {
0% { -webkit-transform: rotate(-20deg); }
50% { -webkit-transform: rotate(26deg); }
100% { -webkit-transform: rotate(-20deg); }
}*/
#-webkit-keyframes right-forearm {
0% { -webkit-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(-65deg); }
100% { -webkit-transform: rotate(-10deg); }
}
/*#-webkit-keyframes left-forearm {
0% { -webkit-transform: rotate(-45deg); }
50% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(-45deg); }
}*/
#-webkit-keyframes right-thigh {
0% { -webkit-transform: rotate(-45deg); }
50% { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(-45deg); }
}
#-webkit-keyframes left-thigh {
0% { -webkit-transform: rotate(10deg); }
50% { -webkit-transform: rotate(-45deg); }
100% { -webkit-transform: rotate(10deg); }
}
#-webkit-keyframes right-shin {
0% { -webkit-transform: rotate(30deg); }
25% { -webkit-transform: rotate(20deg); }
50% { -webkit-transform: rotate(20deg); }
75% { -webkit-transform: rotate(85deg); }
100% { -webkit-transform: rotate(30deg); }
}
#-webkit-keyframes left-shin {
0% { -webkit-transform: rotate(20deg); }
25% { -webkit-transform: rotate(85deg); }
50% { -webkit-transform: rotate(30deg); }
75% { -webkit-transform: rotate(20deg); }
100% { -webkit-transform: rotate(20deg); }
}
#-webkit-keyframes right-foot {
0% { -webkit-transform: rotate(-5deg); }
25% { -webkit-transform: rotate(-7deg); }
50% { -webkit-transform: rotate(-16deg); }
75% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(-5deg); }
}
#-webkit-keyframes left-foot {
0% { -webkit-transform: rotate(-16deg); }
25% { -webkit-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(-5deg); }
75% { -webkit-transform: rotate(-7deg); }
100% { -webkit-transform: rotate(-16deg); }
}
#-webkit-keyframes right-toes {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(-10deg); }
75% { -webkit-transform: rotate(-25deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-webkit-keyframes left-toes {
0% { -webkit-transform: rotate(-10deg); }
25% { -webkit-transform: rotate(-25deg); }
50% { -webkit-transform: rotate(0deg); }
75% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(-10deg); }
}
Please help me solve this issue. I looked into the other post about this problem but I am not able to correct it.
Thank you

You can read this one
z-index is canceled by setting transform(rotate)
basically, transforming an element using 'transform' which gives the element its own stacking context that is different than other element which is not transformed. What you can do is make all element to transform, for example:
<div class="a"><img src="..."></div>
<div class="b"><img src="..."></div>
you want div 'a' to scale(0.9) and be on top of 'b'. you can make the div 'b' to transform to translate(0,0) or scale(0) which won't make any different. Or you can just transform the content inside of it (for my example it's an image element) instead of the div that wrapping it. then just apply the z-index to div.

Since the transform property resets the stacking order of the elements, what i did is a wrapper div to the class "me" and apply transform scale property to the wrapper to reduce the size
.wrapper{
-webkit-transform: scale(0.4);
}
here is the link to the working fiddle https://jsfiddle.net/kq2soozp/5/

It's not the z-index that is getting messed up, it's the relative size of the inner divs in relation to the main .me div. You resize .me to 90% of its original size, and then resize all the divs inside as well, so they end up at 81% of their original sizes.
Solution: apply the scale only to the .me and not to the divs in it.
.wrapper {
position: relative;
}
.me,
.me div {
background-repeat: no-repeat;
position: absolute;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.me {
top: 80px;
left: 350px;
transform: scale(0.9); /* moved here */
}
.torso {
height: 274px;
width: 86px;
background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}
.arm {
left: 12px;
transform-origin: 20px 10px;
}
.kite {
width: 395px;
height: 424px;
top: -115px;
left: 0px;
background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
transform: rotate(45deg) scale(0.6);
}
.right.bicep {
width: 51px;
height: 124px;
background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}
.left.bicep {
width: 52px;
height: 126px;
background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}
.left.forearm {
width: 37px;
height: 124px;
background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
transform: rotate(-45deg);
}
.right.forearm {
width: 36px;
height: 121px;
background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
animation-name: right-forearm;
}
.left.thigh {
width: 69px;
height: 144px;
background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}
.right.thigh {
width: 69px;
height: 144px;
background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}
.shin {
width: 53px;
height: 173px;
background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}
.foot {
width: 67px;
height: 34px;
background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}
.toes {
width: 28px;
height: 25px;
background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}
.right.arm {
top: 93px;
animation-name: right-bicep;
}
.left.arm {
top: 87px;
transform: rotate(-26deg);
}
.forearm {
top: 108px;
left: 14px;
transform-origin: 3px 7px;
}
.leg {
left: 6px;
transform-origin: 30px 20px;
animation-name: thigh;
}
.right.leg {
top: 235px;
animation-name: right-thigh;
}
.left.leg {
top: 225px;
animation-name: left-thigh;
}
.shin {
top: 115px;
transform-origin: 30px 25px;
}
.right.shin {
animation-name: right-shin;
}
.left.shin {
animation-name: left-shin;
}
.foot {
top: 155px;
left: 2px;
transform-origin: 0 50%;
}
.right.foot {
animation-name: right-foot;
}
.left.foot {
animation-name: left-foot;
}
.toes {
top: 9px;
left: 66px;
transform-origin: 0% 100%;
}
.right.toes {
animation-name: right-toes;
}
.left.toes {
animation-name: left-toes;
}
div.right.arm {
z-index: 1;
}
div.left.arm {
z-index: -3;
}
div.arm>div.bicep>div.forearm {
z-index: -1;
}
div.right.leg {
z-index: -1;
}
div.left.leg {
z-index: -2;
}
div.leg>div.thigh>div.shin {
z-index: -1;
}
#keyframes me {
0% {
transform: rotate(5deg) translate( 5px, 0px);
}
25% {
transform: rotate(5deg) translate(-5px, -14px);
}
50% {
transform: rotate(5deg) translate( 5px, 0px);
}
75% {
transform: rotate(5deg) translate(-5px, -14px);
}
100% {
transform: rotate(5deg) translate( 5px, 0px);
}
}
#keyframes right-bicep {
0% {
transform: rotate(26deg);
}
50% {
transform: rotate(-20deg);
}
100% {
transform: rotate(26deg);
}
}
/*#keyframes left-bicep {
0% { transform: rotate(-20deg); }
50% { transform: rotate(26deg); }
100% { transform: rotate(-20deg); }
}*/
#keyframes right-forearm {
0% {
transform: rotate(-10deg);
}
50% {
transform: rotate(-65deg);
}
100% {
transform: rotate(-10deg);
}
}
/*#keyframes left-forearm {
0% { transform: rotate(-45deg); }
50% { transform: rotate(-10deg); }
100% { transform: rotate(-45deg); }
}*/
#keyframes right-thigh {
0% {
transform: rotate(-45deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(-45deg);
}
}
#keyframes left-thigh {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-45deg);
}
100% {
transform: rotate(10deg);
}
}
#keyframes right-shin {
0% {
transform: rotate(30deg);
}
25% {
transform: rotate(20deg);
}
50% {
transform: rotate(20deg);
}
75% {
transform: rotate(85deg);
}
100% {
transform: rotate(30deg);
}
}
#keyframes left-shin {
0% {
transform: rotate(20deg);
}
25% {
transform: rotate(85deg);
}
50% {
transform: rotate(30deg);
}
75% {
transform: rotate(20deg);
}
100% {
transform: rotate(20deg);
}
}
#keyframes right-foot {
0% {
transform: rotate(-5deg);
}
25% {
transform: rotate(-7deg);
}
50% {
transform: rotate(-16deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(-5deg);
}
}
#keyframes left-foot {
0% {
transform: rotate(-16deg);
}
25% {
transform: rotate(-10deg);
}
50% {
transform: rotate(-5deg);
}
75% {
transform: rotate(-7deg);
}
100% {
transform: rotate(-16deg);
}
}
#keyframes right-toes {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-10deg);
}
50% {
transform: rotate(-10deg);
}
75% {
transform: rotate(-25deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes left-toes {
0% {
transform: rotate(-10deg);
}
25% {
transform: rotate(-25deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(-10deg);
}
}
<div class="wrapper">
<div class='me'>
<div class="torso">
<div class="left leg">
<div class="left thigh">
<div class="left shin">
<div class="left foot">
<div class="left toes"></div>
</div>
</div>
</div>
</div>
<div class="right leg">
<div class="right thigh">
<div class="right shin">
<div class="right foot">
<div class="right toes"></div>
</div>
</div>
</div>
</div>
<div class="left arm">
<div class="left bicep">
<div class="left forearm">
<div class="kite"></div>
</div>
</div>
</div>
<div class="right arm">
<div class="right bicep">
<div class="right forearm"></div>
</div>
</div>
</div>
</div>
</div>
By the way, some remarks:
// for a comment is an error in CSS. Don't do this. It happens to have no effect in your fiddle, but just look at this fiddle where it goes wrong.
You don't need the vendor prefixes during testing. Remove them and the code works in all browsers. If you want to be backwards compatible with older ones, fine, you can add in the prefixed properties (above the unprefixed ones), but do that after you're done twiddling with them.

Border not lining up for a circle

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.