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
Related
I'm using mix-blend-mode to change the color of my hamburger menu but it isn't working. The menu stays the some color regardless of what the background is. Here's the CSS and HTML
:root {
--black-color: #3F3D3C;
--white-color: #FAF9F6;
--taupe-color: #D8C7B8;
--grey-color: #CCC5C2;
}
.menu {
position: fixed;
top: 0;
right: 0;
z-index: 1;
aspect-ratio: 1 / 1;
width: 5%;
max-width: 25px;
margin-right: 1rem;
margin-top: 1rem;
}
.menu .toggler {
position: absolute;
margin: auto;
z-index: 2;
cursor: pointer;
width: 100%;
height: 100%;
opacity: 0;
}
.menu .icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
aspect-ratio: 1 / 1;
width: 100%;
background: transparent;
}
.menu .icon>div {
position: relative;
width: 100%;
height: 0.5px;
background: var(--black-color);
mix-blend-mode: difference;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.menu .icon>div:before {
content: '';
position: absolute;
top: -4px;
width: 100%;
height: 0.5px;
z-index: 1;
background: inherit;
mix-blend-mode: difference;
}
.menu .icon>div:after {
content: '';
position: absolute;
top: 4px;
width: 100%;
height: 0.5px;
z-index: 1;
background: inherit;
mix-blend-mode: difference;
}
.black {
background-color: var(--black-color);
height: 100vh;
width: 100vw;
}
.grey {
background-color: var(--grey-color);
height: 100vh;
width: 100vw;
}
.white {
background-color: var(--white-color);
height: 100vh;
width: 100vw;
}
<div class="menu">
<input type="checkbox" class="toggler" onclick="document.getElementById('overlay').style.opacity='1'">
<div class="icon">
<div></div>
</div>
<div class="overlayHidden" id="overlay">
<nav>
<div id="nav-links"></div>
</nav>
</div>
</div>
<div class="white">content with different background color</div>
<div class="black">content with different background color</div>
<div class="grey">content with different background color</div>
where am I going wrong?
EDIT:
updated the code so you can run snippet
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>
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 am trying to produce this effect with CSS. I have tried creating a box with a triangle and then using negative margin to overlap it onto the circle, but cannot get it right.
Many thanks for any help.
fiddle
https://jsfiddle.net/Hastig/n3w0tztv/
Getting the circle to stay vertically centered and have the text container min-height the height of circle is tricky and is not worked out in this example. A cheap fix is adding align-items: center to .container at a breakpoint with #media.
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: white;
height: 100vh;
}
.container {
display: flex;
width: 100%;
padding: 10px;
overflow: hidden;
}
.left {
position: relative;
display: flex;
width: 150px;
height: 150px;
margin-top: -4px;
margin-bottom: -4px;
margin-right: -17px;
background-color: #ec847c;;
border-style: solid;
border-color: white;
border-width: 4px;
border-radius: 100%;
z-index: 10;
}
.right {
position: relative;
display: flex;
flex: 2;
font-size: 20px;
color: white;
background-color: #4ca132;
}
.square {
position: absolute;
left: 0;
width: 50px;
height: 50px;
background-color: white;
overflow: hidden;
}
.square-top { top: 0; }
.square-btm { bottom: 0; }
.square::before {
content: "";
position: absolute;
display: flex;
width: 100%;
height: 100%;
transform: rotate(45deg) scale(2);
background-color: #4ca132;
z-index: 1;
}
.square-top::before { top: 50%; left: 50%; }
.square-btm::before { bottom: 50%; left: 50%; }
.text {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px 20px 20px 40px;
}
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="square square-top"></div>
<div class="square square-btm"></div>
<div class="text">
Roles play an extremely important part in family funtion.
</div>
</div>
</div>
Safari has full support for FlexBox according to caniuse.
I am simply trying to stack some differently sized div's on top of each other using flexbox. I am genuinely curious as to why this works in Chrome/Firefox but not in Safari:
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
position: absolute;
}
.inner-one {
width: 13rem;
height: 13rem;
border-radius: 50%;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
border-radius: 50%;
background-color: purple;
}
See JSFiddle here: https://jsfiddle.net/19n95exf/3/
Because position: absolute; break display: flex, use transform: translate instead
.container {
position: relative;
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
}
.container div {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.inner-one {
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
background-color: purple;
}
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
Or give the inner elements a left/top value
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
border-radius: 50%;
position: absolute;
}
.inner-one {
left: 1.5rem;
top: 1.5rem;
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
left: 2.5rem;
top: 2.5rem;
width: 11rem;
height: 11rem;
background-color: purple;
}
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>