When I run this animation on Safari, there is a unwanted offset between wrapper and target, which should be at the center of wrapper. This code work well on others browsers including IE.
A strange thing is that the position of the target in developer tool is correct, but it just rendered with offset.
Here is the screenshot.
Is there any hack to take over this problem?
My safari version: 10.1.1
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-animation: flip 2s;
animation: flip 2s;
}
#-webkit-keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
Thanks for any help!
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: relative;
margin: 0 auto;
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: -30px;
right: 0;
-webkit-animation: flip 2s;
animation: flip 2s;
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(60px,0) rotateX(0deg);
transform: translate(60px,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(0px,0) rotateX(360deg);
transform: translate(0px,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
u can try this code..
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 want to rotate my image/ or element right after it reached to its location given in keframe breakpoints.
rotation and animation are being applied together.
Here is HTML
<body>
<div class="container">
<div class="box"></div>
</div>
and here is the CSS.
.container {
background-color: lightgray;
height: 600px;
width: 800px;
margin: auto;
}
.box {
height: 100px;
width: 100px;
// background-image: url("car.png");
background-size:100px 100px;
position: relative;
top:40px; left: 620px;
animation: Glider infinite 5s ease-in-out;
}
#keyframes Glider {
0% {
top:40px; left:620px;
}
25% {
top:40px; left: 80px;
transform: rotate(-90deg);
}
50%{
top:400px; left: 80px;
transform: rotate(-180deg);
}
75%{
top:400px; left: 620px;
transform: rotate(-270deg);
}
100%{
top:40px; left: 620px;
transform: rotate(-360deg);
}
}
What i wanted to do is move image to top:40px; left: 80px; then stay rotate(-90deg) , after rotation applied move to next point.
Want this to happen on every turning point.
LINK: https://output.jsbin.com/hiyamirera/1
WHAT AM I MISSING?
You may try something like this. The idea is to force the same value of rotation in the frames so it won't rotate while translating and you change the rotation between 2 close frames.
.container {
background-color: lightgray;
height: 600px;
width: 800px;
margin: auto;
}
.box {
height: 100px;
width: 100px;
background: red;
position: relative;
top: 40px;
left: 620px;
animation: Glider infinite 5s ease-in-out;
}
#keyframes Glider {
0% {
top: 40px;
left: 620px;
transform: rotate(0);
}
25% {
top: 40px;
left: 80px;
transform: rotate(0);
}
28% {
transform: rotate(-90deg);
}
50% {
top: 400px;
left: 80px;
transform: rotate(-90deg);
}
53% {
transform: rotate(-180deg);
}
75% {
top: 400px;
left: 620px;
transform: rotate(-180deg);
}
78% {
transform: rotate(-270deg);
}
97% {
top: 40px;
left: 620px;
transform: rotate(-270deg);
}
100% {
transform: rotate(-360deg);
}
}
<div class="container">
<div class="box"></div>
</div>
Alright, so I have two problems, the first problem is that I want the animation to rotate over the X-axes, but it looks weird, because it's not spinning inside each other, Fiddle
Then my other problem is, when I add something like scale(1.5) to the transform animation, it just seems to ignore the rotation, it just won't work anymore.
HTML
<div class="coin-wrapper">
<div class="animate coin">
<div class="terrorist"></div>
<div class="counter-terrorist"></div>
</div>
</div>
CSS
.animate{
animation: rotate 5s;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateX(2160deg);
-moz-transform: rotateX(2160deg);
transform: rotateX(2160deg);
}
}
.coin-wrapper {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.coin {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.coin .counter-terrorist, .coin .terrorist {
position: absolute;
width: 200px;
height: 200px;
}
.coin .terrorist {
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/terrorist.png');
background-size:cover;
}
.coin .counter-terrorist {
transform: rotateY(180deg);
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/counter-terrorist.png');
background-size:cover;
}
The height of the .coin element is being calculated as 0, so that's where the transform-origin is. If you make the coin fill its parent, then it looks good. You can work around the scaling problem by applying scale to the wrapper instead of the coin.
.animate{
animation: rotate 5s;
}
.coin-wrapper {
animation: scale 5s;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateX(2160deg);
-moz-transform: rotateX(2160deg);
transform: rotateX(2160deg);
}
}
#-webkit-keyframes scale {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
}
.coin-wrapper {
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.coin {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.coin .counter-terrorist, .coin .terrorist {
position: absolute;
width: 200px;
height: 200px;
}
.coin .terrorist {
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/terrorist.png');
background-size:cover;
}
.coin .counter-terrorist {
transform: rotateY(180deg);
border-radius: 50%;
background-image:url('https://csgoloto.com/template/img/counter-terrorist.png');
background-size:cover;
}
<div class="coin-wrapper">
<div class="animate coin">
<div class="terrorist"></div>
<div class="counter-terrorist"></div>
</div>
</div>
Please, try this in action. I change opacity on one element and this affects the look of another static element which contains text. It's hard to explain, just try and tell me how can I avoid this effect. It seems to me that this happens only when using chain of transforms.
http://jsfiddle.net/6p8jf3d3/
HTML:
<div class="outer">
<div class="inner"></div>
<div class="text">Hello</div>
</div>
CSS:
div.outer {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 100px;
border: 1px solid black;
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
div.inner {
width: 100%;
height: 100%;
background-color: #99CCFF;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
div.text {
position: absolute;
top: 0;
left: 0;
font-size: 2em;
font-weight: bold;
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
div.outer:hover div.inner {
opacity: 1;
}
Adding transform: translateZ(0); to div.inner will stop the hopping/jarring effect of the transition, but it keeps the stack fuzz on it. It's better, but not perfect:
Example Fiddle
So, I've experimented a bit (not with this jsfiddle but with larger example) and found solution for Chrome, Safari, Opera and Firefox. Combination of translateZ, backface-visibility and transform-style. jsfiddle.net/6p8jf3d3/4
CSS:
div.outer {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 100px;
border: 1px solid black;
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.inner {
width: 100%;
height: 100%;
background-color: #99CCFF;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
div.text {
position: absolute;
top: 0;
left: 0;
font-size: 2em;
font-weight: bold;
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
div.outer:hover div.inner {
opacity: 1;
}
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