This circular ring should be rotating around the hoodie guy. But for now, it is rotating in front of the hoodie guy. And here is the video preview for reference.
.body-part-2 {
position: relative;
}
.background-circle {
background: #28292d;
border-radius: 50%;
width: 550px;
height: 550px;
z-index: 9;
}
.hoodie-guy {
position: absolute;
background: url(assets/Hoodie-guy.png);
top: 100px;
height: 550px;
width: 550px;
background-size: cover;
}
.circle {
position: relative;
top: 400px;
left: 220px;
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: animateCircle 40s linear infinite;
}
#keyframes animateCircle
{
0%
{
transform: perspective(1000px) rotateY(0deg) rotateX(15deg) translateY(-30px);
}
100%
{
transform: perspective(1000px) rotateY(360deg) rotateX(15deg) translateY(-30px);
}
}
.circle span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #2d2e32;
box-shadow: 0px 0px 5px #00000080;
border-radius: 50%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i) * calc(360deg / 11))) translateZ(300px);
}
.circle span img {
position: relative;
top: 12px;
left: 12px;
object-fit: cover;
}
<div class="body-part-2">
<div class="hoodie-guy-animation-class">
<div class="hoodie-guy"></div>
<div class="circle">
<span style="--i:1;"><img src="assets/flutter.png" height="75px"></span>
<span style="--i:2;"><img src="assets/python.png" height="75px"></span>
<span style="--i:3;"><img src="assets/photoshop.png" height="75px"></span>
<span style="--i:4;"><img src="assets/django.png" height="75px"></span>
<span style="--i:5;"><img src="assets/premiere_pro.png" height="75px"></span>
<span style="--i:6;"><img src="assets/html.png" height="70px"></span>
<span style="--i:7;"><img src="assets/figma.png" height="75px"></span>
<span style="--i:8;"><img src="assets/css.png" height="70px"></span>
<span style="--i:9;"><img src="assets/javascript.png" height="75px"></span>
<span style="--i:10;"><img src="assets/illustrator.png" height="75px"></span>
<span style="--i:11;"><img src="assets/dart.png" height="75px"></span>
</div>
</div>
<div class="background-circle"></div>
</div>
Related
I have a problem trying to make a gradient effect with CSS.
When I use the position: absolute along with the -webkit-text-fill-color: transparent properties/values, the text disappears. I added my code example as a Stack snippet below.
I think the problem comes from the position property in the CSS
Some letters can be seen without the absolute value, but they are static position.
#exemple {
height: 240px;
}
.colore1 {
position: absolute;
z-index: 0;
text-shadow: #000000 2px 0 10px;
font-family: Catamaran, sans-serif;
font-size: 2em;
}
.colore2 {
position: absolute;
z-index: 1;
background: url(https://gadgetshelp.com/wp-content/uploads/images/lfw/df604a43a760a942fdc6876708fa2d6e.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
font-family: Catamaran, sans-serif;
font-size: 2em;
-webkit-text-stroke: 2px white;
}
span {
display: inline-block;
}
.a001 {
position: static;
left: 174.372px;
top: 166.246px;
transform: translateX(-50%) rotate(-75.5411deg);
}
.a002 {
position: static;
left: 179.27px;
top: 141.066px;
transform: translateX(-50%) rotate(-73.0004deg);
}
.a003 {
position: absolute;
left: 187.312px;
top: 117.025px;
transform: translateX(-50%) rotate(-68.829deg);
}
.a004 {
position: absolute;
left: 198.318px;
top: 94.6583px;
transform: translateX(-50%) rotate(-63.12deg);
}
.a005 {
position: absolute;
left: 212.041px;
top: 74.4662px;
transform: translateX(-50%) rotate(-56.001deg);
}
.a006 {
position: absolute;
left: 228.177px;
top: 56.8995px;
transform: translateX(-50%) rotate(-47.6311deg);
}
.a007 {
position: absolute;
left: 246.364px;
top: 42.3508px;
transform: translateX(-50%) rotate(-38.1972deg);
}
.a008 {
position: absolute;
left: 266.195px;
top: 31.145px;
transform: translateX(-50%) rotate(-27.91deg);
}
.a009 {
position: absolute;
left: 287.229px;
top: 23.5325px;
transform: translateX(-50%) rotate(-16.9993deg);
}
.a010 {
position: absolute;
left: 308.994px;
top: 19.6832px;
transform: translateX(-50%) rotate(-5.70896deg);
}
.a011 {
position: absolute;
left: 331.006px;
top: 19.6832px;
transform: translateX(-50%) rotate(5.70896deg);
}
.a012 {
position: absolute;
left: 352.771px;
top: 23.5325px;
transform: translateX(-50%) rotate(16.9993deg);
}
.a013 {
position: absolute;
left: 373.805px;
top: 31.145px;
transform: translateX(-50%) rotate(27.91deg);
}
.a014 {
position: absolute;
left: 393.636px;
top: 42.3508px;
transform: translateX(-50%) rotate(38.1972deg);
}
.a015 {
position: absolute;
left: 411.823px;
top: 56.8995px;
transform: translateX(-50%) rotate(47.6311deg);
}
.a016 {
position: absolute;
left: 427.959px;
top: 74.4662px;
transform: translateX(-50%) rotate(56.001deg);
}
.a017 {
position: absolute;
left: 441.682px;
top: 94.6583px;
transform: translateX(-50%) rotate(63.12deg);
}
.a018 {
position: absolute;
left: 452.688px;
top: 117.025px;
transform: translateX(-50%) rotate(68.829deg);
}
.a019 {
position: absolute;
left: 460.73px;
top: 141.066px;
transform: translateX(-50%) rotate(73.0004deg);
}
.a020 {
position: static;
left: 465.628px;
top: 166.246px;
transform: translateX(-50%) rotate(75.5411deg);
}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Test Gradient Example</title>
</head>
<body>
<div id="exemple" style="height: 240px;">
<div class="colore1" style="width: 640px; height: 100vh; text-align: center; padding-top: 250px; font-size: 55px;">
<span class="a001">B</span>
<span class="a002">o</span>
<span class="a003">n</span>
<span class="a004"> </span>
<span class="a005">A</span>
<span class="a006">n</span>
<span class="a007">n</span>
<span class="a008">i</span>
<span class="a009">v</span>
<span class="a010">e</span>
<span class="a011">r</span>
<span class="a012">s</span>
<span class="a013">a</span>
<span class="a014">i</span>
<span class="a015">r</span>
<span class="a016">e</span>
<span class="a017"> </span>
<span class="a018">!</span>
<span class="a019">!</span>
<span class="a020">!</span>
</div>
<div class="colore2" style="width: 640px; height: 100vh; text-align: center; padding-top: 250px; font-size: 55px;">
<span class="a001">B</span>
<span class="a002">o</span>
<span class="a003">n</span>
<span class="a004"> </span>
<span class="a005">A</span>
<span class="a006">n</span>
<span class="a007">n</span>
<span class="a008">i</span>
<span class="a009">v</span>
<span class="a010">e</span>
<span class="a011">r</span>
<span class="a012">s</span>
<span class="a013">a</span>
<span class="a014">i</span>
<span class="a015">r</span>
<span class="a016">e</span>
<span class="a017"> </span>
<span class="a018">!</span>
<span class="a019">!</span>
<span class="a020">!</span>
</div>
</div>
</body>
</html>
I'm using a code snippet from a website for a circular progress bar, but now I am stuck. I can't solve how to stop progress bar at particular point (let's say 73% or 90%). How can I achieve that?
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
numb.textContent = counter + "%";
}
}, 80);
.circular {
height: 150px;
width: 150px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 36%;
left: 37%;
height: 117px;
width: 117px;
margin: -40px 0 0 -40px;
background-color: #ffffff;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #F2F5F5;
-webkit-border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 16px;
height: 16px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<div class="circular">
<div class="inner"></div>
<div class="outer"></div>
<div class="numb">
0%
</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
Maybe you could say if(counter == 73) { animation.pause() }
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(()=>{
if(counter == 73){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
.circular{
height: 150px;
width: 150px;
position: relative;
}
.circular .inner, .circular .outer, .circular .circle{
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}
.circular .inner{
top: 36%;
left: 37%;
height: 117px;
width: 117px;
margin: -40px 0 0 -40px;
background-color: #ffffff;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.circular .circle{
z-index: 1;
box-shadow: none;
}
.circular .numb{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #F2F5F5;
-webkit-border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.circle .bar .progress, .dot span{
background: #4158d0;
}
.circle .left .progress{
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100%{
transform: rotate(180deg);
}
}
.circle .right{
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress{
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100%{
transform: rotate(80deg);
}
}
.circle .dot{
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 16px;
height: 16px;
border-radius: 100%;
}
#keyframes dot{
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<div class="circular">
<div class="inner"></div>
<div class="outer"></div>
<div class="numb">
0%
</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
I am trying to animate the truck over road on the image. I have made the snipped for it below. all of images are on svg file. But i am not sure how to animate the tuck within the road. how can i animate the truck so that it goes within the road ?
.page-header {
background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
height: 800px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
width: 790px;
}
.truck-1 {
width: 100px;
position: absolute;
top: 57%;
left: 29%;
width: 80px;
}
.truck-2 {
width: 100px;
position: absolute;
top: 76%;
left: 62%;
transform: rotate(32deg);
width: 80px;
}
<div class="page-header">
<img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
<img class="truck-2" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>
What you need to examine is CSS Animations. After that, you can go with something like this:
.page-header {
position: relative;
background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
height: 800px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
width: 790px;
}
.truck-1 {
width: 100px;
position: absolute;
top: 57%;
left: 29%;
width: 80px;
animation: truck1 5s infinite;
}
#keyframes truck1 {
0% {
top: 57%;
left: 29%;
transform: rotate(0);
}
20% {
top: 68%;
left: 20%;
transform: rotate(0);
}
40% {
top: 68%;
left: 20%;
transform: rotate(90deg);
}
60% {
top: 30%;
left: 5%;
transform: rotate(90deg);
}
80% {
top: 30%;
left: 5%;
transform: rotate(120deg);
}
100% {
top: 10%;
left: 5.5%;
transform: rotate(120deg);
}
}
<div class="page-header">
<img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>
Also on JSFiddle.
Please note, in order to work with absolute positioning and percents, the parent element has to be position: relative;, or any other than static.
Did you need it?
.page-header {
animation: trucks 10s infinite;
background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
height: 800px;
background-size: 100%;
background-position: center;
width: 790px;
}
.truck-1 {
width: 100px;
position: absolute;
top: 57%;
left: 29%;
width: 80px;
}
.truck-2 {
width: 100px;
position: absolute;
top: 76%;
left: 62%;
transform: rotate(32deg);
width: 80px;
}
#keyframes trucks {
0% {background-position: 0 0; }
100% {background-position: 0 -2100px; }
}
<div class="page-header">
<img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
<img class="truck-2" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>
I have this flipcard I put together, and when you hover over it, it flips 180 degrees on it's x-axis, and then expands. When I mouse-off of the element, I would like for this element to flip back the opposite way smoothly, the way it came in. Instead of the sudden change back when you mouseout like it is right now.
Also, it should be noted that I would like the animation to use animation: forwards for as long as the mouse is hovering over the element. (ie. so long as the user is hovering over the element, it should remain flipped, and enlarged.)
Is there any way to do this using just CSS? Or will I need Javascript? If so, I'd like to do this with pure Vanilla JS.
I have been poking around for solutions on Stack Overflow, and can't seem to find a definitive answer, or am not typing in the correct question.
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
}
#keyframes grow {
from {
transform: rotateY(0) scale(1);
}
to {
transform: rotateY(180deg) scale(2);
}
}
.flipcard:hover {
animation: grow 1s forwards;
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
You'd better use transition between normal and hover states.
Note that you have to track hover on .container to avoid jumping and flickering.
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transition: all .5s ease-in-out;
}
.container:hover .flipcard {
transform: rotateY(180deg) scale(2);
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
The reason this happens is because on the default non-hover state there's no animation state to return to. You have two options for this.
Don't use animations and just transition the effect on hover.
This way on out the properties will return to their non-hover state with transition.
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
transition: all 0.3s ease;
}
.flipcard:hover {
transform: rotateY(180deg) scale(2);
}
https://jsfiddle.net/255mnwxr/5/
To have a out animation property.
This is least desired because on load the animation will play once for it to animate then it acts naturally afterwards.
.flipcard {
animation: return 1s forwards;
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transition: all 0.3s ease;
}
#keyframes grow {
from {
transform: rotateY(0) scale(1);
}
to {
transform: rotateY(180deg) scale(2);
}
}
#keyframes return {
from {
transform: rotateY(180deg) scale(2);
}
to {
transform: rotateY(0) scale(1);
}
}
https://jsfiddle.net/255mnwxr/2/
You need to add #keyframes on the mouse in and out hover.
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
}
#-webkit-keyframes in {
from { -webkit-transform: rotate(0deg); }
to {-webkit-transform: rotateY(180deg) scale(2);}
}
#-webkit-keyframes out {
0% { -webkit-transform: rotateY(180deg) scale(2); }
100% { -webkit-transform: rotate(0deg); }
}
.flipcard:hover {
animation: out 1s forwards;
}
.flipcard {
animation: in 1s forwards;
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
You don't need a keyframe animation for this, you could just use basic CSS transitions for this, they'll rewind on mouseout with the transition property:
.flipcard {
transform: rotateY(0) scale(1);
transition: 1s all ease-out;
}
.flipcard:hover {
transform: rotateY(180deg) scale(2);
}
However, if you do want to use animations (for more complex interactions) I have a snippet for that at the bottom, just know this can be a little harder to maintain, and just reversing it on the default element won't work.
Also note that you may want a mouse-container that doesn't rotate but controls the hover state otherwise the mouse may fall off part way through the transition, like:
.flipcard-container:hover .flipcard {
transform: rotateY(180deg) scale(2);
}
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
transition: 1s all ease-out;
}
.flipcard:hover {
transform: rotateY(180deg) scale(2);
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
#keyframes grow {
from {
transform: rotateY(0) scale(1);
}
to {
transform: rotateY(180deg) scale(2);
}
}
#keyframes shrink {
from {
transform: rotateY(180deg) scale(2);
}
to {
transform: rotateY(0) scale(1);
}
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
animation: shrink 1s forwards;
}
.flipcard:hover {
animation: grow 1s forwards;
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
here is my CodePen demo or you can run the snippet below.
In the original script, the front face of the cube is a slider, and when I hover my 'info-box' it shows the right side of it with some description (<p> an <a>).
The expected behavior is that as long as the user stays on the description, the element keeps having the .hover class given in the $('#info-box').hover() function
All was working fine until i tested it on chrome :(...
From what I understand, it seems to fires multiples mouseOver/mouseOut events when hovering and it messes and flicker everything up.
Should I use a setTimeout ?
$('.slide-info').click(function() {
$(this).parent().toggleClass('hover');
})
.hover(function() {
$(this).parent().addClass('hover');
},
function() {
$(this).parent().removeClass('hover');
});
$('.right').hover(function() {
$(this).parent().parent().addClass('hover');
},
function() {
$(this).parent().parent().removeClass('hover');
});
h1 {
text-align: center;
}
body {
background-color: #333;
}
.Cube-container {
width: 500px;
top: 20px;
height: 150px;
perspective: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
transform-origin: 50% 50% -250px;
}
.Cube {
transition: all .5s ease-out;
transform-style: preserve-3d;
backface-visibility:hidden;
}
.front,
.right {
height: 150%;
text-align: center;
padding-top: 10px;
backface-visibility: hidden;
}
.Cube-container.hover .Cube {
transform: rotateY(90deg);
transform-origin: 50% 50% -250px;
}
.front {
transform-style: preserve-3d;
transition: all .5s ease-out;
background-color: #fc8;
position: relative;
}
.right {
background-color: #8cf;
position: absolute;
top: 0px;
left: 0px;
height: calc(100% - 10px);
/* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/
width: 100%;
transform: rotateY(-90deg) translateX(-100%);
transform-origin: 0 0;
}
.ol
/* OverLay */
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide-info {
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 15px;
cursor: pointer;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Cube-container">
<div class="ol Cube">
<div class="ol right">
<h2>Right side</h2>
<p>While we hover that side, parent element keeps having the .hover class, making it visible</p>
</div>
<div class="ol front">
<h2>Front</h2>
<p>Hover the info box please :)</p>
</div>
</div>
<div class="ol slide-info">
<h3>INFO</h3>
</div>
</div>http://stackoverflow.com/questions/ask#
The problem was that I used backface-visibility: hidden on parent element. (see commented line in snippet)
Crazy but that solved my problem on Chrome browser, now everything works fine.
$('.slide-info').click(function() {
$(this).parent().toggleClass('hover');
})
.hover(function() {
$(this).parent().addClass('hover');
},
function() {
$(this).parent().removeClass('hover');
});
$('.right').hover(function() {
$(this).parent().parent().addClass('hover');
},
function() {
$(this).parent().parent().removeClass('hover');
});
h1 {
text-align: center;
}
body {
background-color: #333;
}
.Cube-container {
width: 500px;
top: 20px;
height: 150px;
perspective: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
transform-origin: 50% 50% -250px;
}
.Cube {
transition: all .5s ease-out;
transform-style: preserve-3d;
/*backface-visibility:hidden; <-- Causing the problem */
}
.front,
.right {
height: 150%;
text-align: center;
padding-top: 10px;
backface-visibility: hidden;
}
.Cube-container.hover .Cube {
transform: rotateY(90deg);
transform-origin: 50% 50% -250px;
}
.front {
transform-style: preserve-3d;
transition: all .5s ease-out;
background-color: #fc8;
position: relative;
}
.right {
background-color: #8cf;
position: absolute;
top: 0px;
left: 0px;
height: calc(100% - 10px);
/* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/
width: 100%;
transform: rotateY(-90deg) translateX(-100%);
transform-origin: 0 0;
}
.ol
/* OverLay */
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide-info {
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 15px;
cursor: pointer;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Cube-container">
<div class="ol Cube">
<div class="ol right">
<h2>Right side</h2>
<p>While we hover that side, parent element keeps having the .hover class, making it visible</p>
</div>
<div class="ol front">
<h2>Front</h2>
<p>Hover the info box please :)</p>
</div>
</div>
<div class="ol slide-info">
<h3>INFO</h3>
</div>
</div>http://stackoverflow.com/questions/ask#