Flip animation is not working correctly if it has some element inside with position property. This can be only reproduced on the first hover attempt after the page load.
Does anyone know why it has such behavior?
HTML:
<div class="parent">
<div class="card">
<div class="card__logo">
Logo
</div>
<div class="card__burger">
<div class="relative">Menu</div>
</div>
</div>
</div>
SCSS:
.card {
width: 90px;
height: 90px;
transition: transform 1s;
transform-style: preserve-3d;
&__logo,
&__burger {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
backface-visibility: hidden;
background: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
&__burger {
transform: rotateY(180deg);
}
}
.parent:hover {
.card {
transform: rotateY(180deg);
}
}
.relative {
position: relative;
}
Codeopen example
Update: I can reproduce this only in Chrome
I have different code but this will help you.
<style>
.flip-card {
background-color: transparent; width: 100px;
height: 100px; perspective: 1000px; margin-left:16%;
}
.flip-card-inner {
position: relative; width: 100%; height: 100%;
text-align: center; transition: transform 0.6s; transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
position: absolute; width: 100%;
height: 100%; backface-visibility: hidden;
}
.flip-card-front {
background-color: #ffffff; color: black; z-index: 2;
}
.flip-card-back {
background-color: #ffffff; color: white;
transform: rotateY(180deg); z-index: 1;
}
.coninstallbtn { margin-top: 31%; margin-left: 20%; }
</style>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
Front View
</div>
<div class="flip-card-back">
Back View
</div>
</div>
</div>
</body>
Related
I was trying to do the pie chart based on three divs. However, there's always some unwanted border around the divs. Also, they'll expand or shrink while zooming in and out.
Try many ways on other similar questions' solutions. Still can't work.
codepen link https://codepen.io/DavidLee0314/pen/PXWzYJ?editors=1100
* {
width: 100%;
height: 100%;
position: absolute;
margin: 0px;
padding: 0px;
}
.pie {
left: 40%;
top: 30%;
width: 174px;
height: 174px;
border-radius: 100%;
overflow: hidden;
display: flex;
justify-content: center;
font-size: 0px;
white-space: nowrap;
}
.pie .small-box {
width: 100%;
height: 100%;
}
.pie .grey {
transform: translateX(-50%);
background-color: #f3f5f2;
}
.pie .green {
transform: translateX(25%);
background-color: #222;
}
.pie .change {
transform-origin: left center 0;
transform: translateZ(0) scale(1, 1) translateX(50%) rotate(0deg);
background-color: #f3f5f2;
}
<div class="pie">
<div class="small-box green"></div>
<div class="small-box grey"></div>
<div class="small-box change"></div>
</div>
just use this at *:
Border: none:
* {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
padding: 0;
border: none;
}
.pie{
left: 40%;
top: 30%;
width: 174px;
height: 174px;
border-radius: 100%;
overflow: hidden;
display: flex;
justify-content: center;
font-size: 0;
white-space: nowrap;
}
.small-box {
width: 100%;
height: 100%;
}
.grey {
transform: translateX(-50%);
background-color: #f3f5f2;
}
.green {
transform: translateX(25%);
}
.change {
transform-origin: left center 0;
transform: translateZ(0) scale(1.0, 1.0) translateX(50%) rotate(0deg);
background-color: #f3f5f2;
}
<div class="pie">
<div class="small-box green"></div>
<div class="small-box grey"></div>
<div class="small-box change"></div>
</div>
I've been trying to animate this icon but not sure what is the practical way to do it.
Its basically a 3 lines rotate to create an arrow when you click it a menu will expand from the arrow direction see icon --> The Icon
I managed to code it but one of the lines is not behaving like the way I want it to, I tried playing with transform-origin but it didn't work
body {
display: flex;
flex-direction: row;
justify-content: center;
align-self: center;
align-items: center;
align-content: center;
width: 100vh;
height: 100vh;
}
.menu-wrapper {
width: 30px;
height: 30px;
background-color: green;
position: relative;
}
.line {
width: 30px;
height: 5px;
background-color: red;
transform-box: view-box;
}
.top {
position: absolute;
top: 0;
}
.middle {
position: absolute;
top: 12.5px;
}
.bottom {
position: absolute;
bottom: 0;
}
.menu-wrapper:hover .top {
transform: translateY(12.5px);
transform: rotate(-90deg);
transform-origin: inherit;
}
.menu-wrapper:hover .middle {
transform: rotate(-45deg);
}
<body>
<div class="menu-wrapper">
<div class="line top"></div>
<div class="line middle"></div>
<div class="line bottom"></div>
</div>
Always remember to use position:relative when you are using position:absolute;
Here you go.
*{transition:all .3s ease-out, all .3s ease-in;}
body {
display: flex;
flex-direction: row;
justify-content: center;
align-self: center;
align-items: center;
align-content: center;
width: 100vh;
height: 100vh;
}
.menu-wrapper {
width: 30px;
height: 30px;
/*background-color: green;*/
position: relative;
}
.line {
width: 30px;
height: 5px;
position: relative;
background-color: red;
transform-box: view-box;
}
.top {
position: absolute;
top: 0;
}
.middle {
position: absolute;
top: 12.5px;
}
.bottom {
position: absolute;
bottom: 0;
}
.menu-wrapper:hover .top {
transform: translateY(0);
transform: rotate(-90deg);
transform-origin: inherit;
left: -12.5px;
top: 12px;
}
.menu-wrapper:hover .middle {
transform: rotate(-45deg);
left: 0;
}
<body>
<div class="menu-wrapper">
<div class="line top"></div>
<div class="line middle"></div>
<div class="line bottom"></div>
</div>
Also a codepen to play around: https://codepen.io/Ev1tw1n/pen/wQNWeq
I'm trying to create a sticker pull off effect with css.
For that I found this example: https://codepen.io/patrickkunka/pen/axEgL
Now I have three problems.
I'm using an image and not only colors.
The peeling effect is way to far in the example
Because I'm using an image, I can't move it around.
Now let me show the problems with some code:
.test-sticker {
/*
.sticker:hover .sticky{
transform: rotate(10deg);
}
*/
}
.test-sticker .anim750 {
transition: all 750ms ease-in-out;
}
.test-sticker .sticker {
position: relative;
width: 180px;
height: 180px;
margin: 0 auto;
backface-visibility: hidden;
}
.test-sticker .sticker .sticky {
transform: rotate(-125deg);
}
.test-sticker .sticker .sticky {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}
.test-sticker .sticker .reveal .circle {
font-family: 'helvetica neue', arial;
font-weight: 200;
line-height: 140px;
text-align: center;
cursor: pointer;
}
.test-sticker .sticker .reveal .circle {
background: purple;
}
.test-sticker .sticker .circle_wrapper {
position: absolute;
width: 180px;
height: 180px;
left: 0px;
top: 0px;
overflow: hidden;
}
.test-sticker .sticker .circle {
position: absolute;
width: 140px;
height: 140px;
margin: 20px;
border-radius: 999px;
}
.test-sticker .sticker .back {
height: 10px;
top: 30px;
}
.test-sticker .sticker .back .circle {
margin-top: -130px;
background-color: green;
}
.test-sticker .sticker .front {
height: 150px;
bottom: 0;
top: auto;
-webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, 0.3);
}
.test-sticker .sticker .front .circle {
margin-top: -10px;
background: url("https://upload.wikimedia.org/wikipedia/commons/9/93/Wordpress_Blue_logo.png");
background-size: 140px 140px;
transform: rotate(-235deg);
}
.test-sticker .sticker:hover .back {
height: 90px;
top: 110px;
}
.test-sticker .sticker:hover .back .circle {
margin-top: -50px;
}
<div class="test-sticker">
<div class="wrapper">
<div class="sticker">
<div class="reveal circle_wrapper">
<div class="circle"></div>
</div>
<div class="sticky">
<div class="front circle_wrapper">
<div class="circle"></div>
</div>
</div>
<div class="sticky anim750">
<div class="back circle_wrapper anim750">
<div class="circle anim750"></div>
</div>
</div>
</div>
</div>
</div>
How do I get the greed circle just about 50% and not like now 80%?
Is there a fancy way to get the purple circle extended the same way like the green one? so when I hover over the image, I want to see the back of the sticker, which is white at the end.
Here I have an image and a description inside a container.
I want when I flip the container, the image hides and the description shows up, so I used backface-visibility: hidden; on the image, but it didn't work.
.scene {
width: 200px;
height: 150px;
}
.container {
width: 100%;
height: 100%;
position: relative;
transition: transform .4s;
}
.image,
.description {
position: absolute;
width: 100%;
height: 100%;
}
.scene:hover .container {
transform: rotateY(180deg);
}
.image {
backface-visibility: hidden;
}
<div class="scene">
<div class="container">
<div class="description">
Kurapica is an anime character.
</div>
<img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
</div>
</div>
backface-visibilty:hidden on .image will not work as you are rotating the .container not .image...
so rotate the .image and .description instead of .container to get the desired effect
.scene {
width: 200px;
height: 150px;
}
.container {
width: 100%;
height: 100%;
position: relative;
}
.image,
.description {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform .4s;
}
.description {
transform: rotateX(-180deg);
background: red;
display: flex;
align-items: center;
text-align: center;
}
.scene:hover .image {
transform: rotateX(180deg);
}
.scene:hover .description {
transform: rotateX(0deg);
}
<div class="scene">
<div class="container">
<div class="description">
Kurapica is an anime character.
</div>
<img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
</div>
</div>
Because you have to rotate the image where you specified the backface-visibility:
.scene {
width: 200px;
height: 150px;
}
.container {
width: 100%;
height: 100%;
position: relative;
}
.image,
.description {
position: absolute;
width: 100%;
height: 100%;
transition: transform .4s;
}
.scene:hover .container .image {
transform: rotateX(180deg);
}
.image {
backface-visibility: hidden;
}
<div class="scene">
<div class="container">
<div class="description">
Kurapica is an anime character.
</div>
<img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
</div>
</div>
You need to add on the description element a hidden backface-visibility property too and rotate it to 180deg. That way it will be hidden on a non-hover state. Add the property transform-style: preserve-3d on the container element and that should do it.
You have to set the transformed element's backface-visibility too:
.scene:hover .container {
transform: rotateX(180deg);
backface-visibility: hidden;
}
Below is the CSS i am using:
.flip-container
{
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 150px;
height: 150px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
display: table-cell;
vertical-align:middle;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
text-align: center;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(logo.png) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
}
The HTML that i am using looks like this :
<div id="article"><div class="flip-container" ontouchstart="this.classList.toggle('.'hover'.');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
<img src="" width="160" height="160" /> </div>
</div>
</div>
</div>
The CSS of the article class is:
#article {
margin: 5px;
float: left;
height: 150px;
width: 150px;}
I am unable to make the fext in the FRONT div center vertically centered. Also it would be dynamic and multiline. Any Ideas?
I tried using 'vertical-align:middle' along with 'display:table-cell' but that didn't help or maybe i just applied them to the wrong CSS Blocks.
The Code is on jsFiddle: here
You can use display: table for your parent container and display: table-cell for your child container:
#article {
display:table;
height: 150px;
width: 150px;
float: left;
text-align: center;
}
.front {
display: table-cell;
vertical-align:middle;
}
Fiddle Demo: http://jsfiddle.net/uVSN6/1/