i want to display my box2 from behind box1.
i can use position: relative; into .box1.
but, i got another problem when im using that position into my project.
How to display .box2 from behind .box1 without set position: relative; into .box1?
.main {
height: 100%;
}
#box1 {
background: red;
height: 200px;
width: 100px;
z-index: 999;
}
#box2 {
position: relative;
padding-top: 100px;
padding-bottom: 79px;
color: white;
margin-top: -200px;
margin-left: 110px;
background: black;
heigth: 200px;
width: 100px;
z-index: 1;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}
<div class="main">
<div id="box1">
</div>
<div id="box2" class="animated slideInLeft">
Some text
</div>
</div>
Change z-index to -1
.main {
height: 100%;
}
#box1 {
background: red;
height: 200px;
width: 100px;
z-index: 999;
}
#box2 {
position: relative;
margin: auto;
color: white;
margin-top: -200px;
margin-left: 110px;
background: black;
height: 200px;
width: 100px;
z-index: -1;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}
<div class="main">
<div id="box1">
</div>
<div id="box2" class="animated slideInLeft">
Some text
</div>
</div>
Related
I have a bit of a hard time figuring this one out.
CSS vets help me out here :)
I want to have images (in the example they are denoted as divs with background colors)
overlap each other while hovered upon with animation and return to their respective place when the hover is over with the same animation.
In this example, you can see three sections of different colors move smoothly to the left or the right and then return to the position when the hover is off.
My current code:
.images_parent {
width: 100%;
}
.images_parent>* {
width: 10%;
position: absolute;
transition: margin-left 1s;
}
/*#i*/
#i:hover>* {
z-index: 1;
}
#i:hover #a {
margin-left: 20%;
transition: margin-left 2s ease-in-out;
}
#i:hover #b {
margin-left: 10%;
}
#a {
background-color: blue;
}
#b {
background-color: blue;
}
#c {
background-color: blue;
}
/*#i*/
/*#i2*/
#i2 {
margin-left: 10%;
}
#i2:hover>* {
z-index: 1;
}
#i2:hover #a2 {
margin-left: -10%;
transition: margin-left 1s;
}
#i2:hover #b2 {
margin-left: 10%;
}
#a2 {
background-color: brown;
}
#b2 {
background-color: brown;
}
#c2 {
background-color: brown;
}
/*#i2*/
/*#i3*/
#i3 {
margin-left: 20%;
}
#i3:hover>* {
z-index: 1;
}
#i3:hover #a3 {
margin-left: -20%;
transition: margin-left 2s ease-in-out;
}
#i3:hover #b3 {
margin-left: -10%;
}
#a3 {
background-color: darkgreen;
}
#b3 {
background-color: darkgreen;
}
#c3 {
background-color: darkgreen;
}
/*#i3*/
<div>
<div id="i" class="images_parent">
<div id="a">image3</div>
<div id="b">image3.1</div>
<div id="c">image3.2</div>
</div>
<div id="i2" class="images_parent">
<div id="a2">image2</div>
<div id="b2">image2.1</div>
<div id="c2">image2.2</div>
</div>
<div id="i3" class="images_parent">
<div id="a3">image3</div>
<div id="b3">image3.1</div>
<div id="c3">image3.2</div>
</div>
</div>
https://jsfiddle.net/cbn2z7f6/
The problem is if we de-comment the position:absolute of images_parent then we can see that it does not look very beautiful.
I would like to ask if anyone knows how to do this correctly. Either with only forward animation or forward and backward animations. Both solutions would work for me.
Of course, having images retract would look nicer, but it doesn't matter too much.
Thank you.
.top {
transform-style: preserve-3d;
}
.images_parent {
width: 100%;
transition: all 2s;
transform: translate3d(0, 0, 0);
}
.images_parent > * {
width: 10%;
position: absolute;
transition: all 2s;
}
/*#i*/
#i:hover {
transform: translate3d(0, 0, 10px);
}
#i:hover #a {
transform: translate3d(200%, 0, 20px);
}
#i:hover #b {
transform: translate3d(100%, 0, 10px);
}
#a {
background-color: blue;
}
#b {
background-color: blue;
}
#c {
background-color: blue;
}
/*#i*/
#i2:hover {
transform: translate3d(0, 0, 10px);
}
#i2:hover #a2 {
transform: translate3d(100%, 0, 20px);
}
#i2:hover #b2 {
transform: translate3d(-100%, 0, 10px);
}
/*#i2*/
#i2 {
margin-left: 10%;
}
#a2 {
background-color: brown;
}
#b2 {
background-color: brown;
}
#c2 {
background-color: brown;
}
/*#i2*/
#i3:hover {
transform: translate3d(0, 0, 10px);
}
#i3:hover #a3 {
transform: translate3d(-200%, 0, 20px);
}
#i3:hover #b3 {
transform: translate3d(-100%, 0, 10px);
}
/*#i3*/
#i3 {
margin-left: 20%;
}
#a3 {
background-color: darkgreen;
}
#b3 {
background-color: darkgreen;
}
#c3 {
background-color: darkgreen;
}
/*#i3*/
<div class="top">
<div id="i" class="images_parent">
<div id="a">image3</div>
<div id="b">image3.1</div>
<div id="c">image3.2</div>
</div>
<div id="i2" class="images_parent">
<div id="a2">image2</div>
<div id="b2">image2.1</div>
<div id="c2">image2.2</div>
</div>
<div id="i3" class="images_parent">
<div id="a3">image3</div>
<div id="b3">image3.1</div>
<div id="c3">image3.2</div>
</div>
</div>
I'm trying to get into CSS animations and I can't figure out how to "transform: translateZ(200px)" on the span element with the ".logo" class.
I want to have "Z-Text" floating on the yellow background of "#box3", I applied the preserve-3d transform-style but without any effect.. translateX and Y working fine though.
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 400px;
width: 400px;
border: 1px solid white;
}
#outer-box {
height: 100px;
width: 100px;
background-color: black;
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}
#outer-box > div {
position: absolute;
}
#box2 {
height: 100px;
width: 100px;
top: -50px;
background-color: green;
transform: rotateX(0.25turn);
}
#box3 {
height: 100px;
width: 100px;
background-color: yellow;
top: 50px;
opacity: 0.5;
transform-style: preserve-3d;
transform: rotateX(0.25turn);
perspective: 1000px;
}
.logo {
position: absolute;
transform: translateZ(200px);
}
#box4 {
height: 100px;
width: 100px;
left: 50px;
background-color: blue;
opacity: 0.5;
transform: rotateY(0.25turn);
}
#keyframes spin {
0% {
transform: rotateY(0) rotateX(0deg);
}
50% {
transform: rotateY(180deg) rotateX(180deg);
}
75% {
transform: rotateY(270deg) rotateX(270deg);
}
100% {
transform: rotateY(359deg) rotateX(359deg);
}
}
<div class="container">
<div id="outer-box">
<div id="box2">Any Text</div>
<div id="box3">
<span class="logo">Z-Text</span>
</div>
<div id="box4">Some Text</div>
</div>
</div>
Any suggestions?
I have created this loader, I want to place it in the center of its parent. So in the parent
element I am using
display: flex;
align-items: center;
justify-content:center;
but this is not working. Any help?
.empty-container {
height: 100px;
border: 1px solid gray;
}
.container {
height: calc(100% - 100px);
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.component-loader {
position: relative;
text-align: center;
transition: opacity .7s;
border: 1px solid gray;
height: 90px;
width: 90px;
}
.loader-spinner:before {
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: 160px;
left: calc(50% - 45px);
border-width: 8px;
border-style: solid;
border-color: green #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
/* Safari */
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div style="height: 600px">
<div class="empty-container"></div>
<div class="container">
<div class="component-loader">
<div class="loader-spinner"></div>
</div>
</div>
</div>
.empty-container {
height: 100px;
border: 1px solid gray;
}
.container {
height: calc(100% - 100px);
border: 1px solid red;
position: relative;
}
.component-loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.loader-spinner:before {
content: "";
height: 90px;
width: 90px;
position: absolute;
top: 0;
left: 0;
border-width: 8px;
border-style: solid;
border-color: green #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
/* Safari */
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div style="height: 600px">
<div class="empty-container"></div>
<div class="container">
<div class="component-loader">
<div class="loader-spinner"></div>
</div>
</div>
</div>
Try this code, the parent element of your .loader-spinner:before is .loader-spinner.
.empty-container {
height: 100px;
border: 1px solid gray;
}
.container {
height: calc(100% - 100px);
border: 1px solid red;
display: flex;
align-items: centre;
justify-content: centre;
}
.component-loader {
position: relative;
}
.loader-spinner{
position: relative;
height: 90px;
width: 90px;
text-align: center;
transition: opacity .7s;
border: 1px solid gray;
}
.loader-spinner:before {
content: "";
height: 90px;
width: 90px;
position: absolute;
top: 0;
left: 0;
border-width: 8px;
border-style: solid;
border-color: green #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
/* Safari */
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div style="height: 600px">
<div class="empty-container"></div>
<div class="container">
<div class="component-loader">
<div class="loader-spinner"></div>
</div>
</div>
</div>
*{
box-sizing: border-box;
}
.empty-container {
height: 100px;
border: 1px solid gray;
}
.container {
height: calc(100% - 100px);
border: 1px solid red;
display: flex;
position: relative;
}
.component-loader{
border: 1px solid gray;
position: absolute;
height: 90px;
width: 90px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loader-spinner:before {
content: "";
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-width: 8px;
border-style: solid;
border-color: green #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div style="height: 600px">
<div class="empty-container"></div>
<div class="container">
<div class="component-loader">
<div class="loader-spinner"></div>
</div>
</div>
</div>
I'm trying to get a ripple effect on the bottom left corner. What I would like to see is the ripple effect to only show in the hero area (100% of the retina) and not to overflow into the other section.
I thought I could hide it with 'overflow: hidden' but I seem to be wrong about this.
I'm hoping this explanation of what I want is clear. Let me know if I wasn't.
New to frontend dev
.hero-body {
background: #3399ff;
height: 100%;
}
.circle {
position: absolute;
border-radius: 0 50% 0 0;
background: white;
animation: ripple 15s infinite;
box-shadow: 0px 0px 1px 0px #508fb9;
}
.small {
width: 200px;
height: 200px;
left: -100px;
bottom: -100px;
}
.medium {
width: 400px;
height: 400px;
left: -200px;
bottom: -200px;
}
.large {
width: 600px;
height: 600px;
left: -300px;
bottom: -300px;
}
.xlarge {
width: 800px;
height: 800px;
left: -400px;
bottom: -400px;
}
.xxlarge {
width: 1000px;
height: 1000px;
left: -500px;
bottom: -500px;
}
.shade1 {
opacity: 0.2;
}
.shade2 {
opacity: 0.5;
}
.shade3 {
opacity: 0.7;
}
.shade4 {
opacity: 0.8;
}
.shade5 {
opacity: 0.9;
}
#keyframes ripple {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.8);
}
}
<div class="row justify-content-center">
<div class='ripple-background'>
<div class='circle xxlarge shade1'></div>
<div class='circle xlarge shade2'></div>
<div class='circle large shade3'></div>
<div class='circle mediun shade4'></div>
<div class='circle small shade5'></div>
</div>
</div>
use position: fixed;
body {
background: #3399ff;
height: 100%;
width: 100%;
position: fixed;
}
.circle {
position: absolute;
border-radius: 0 50% 0 0;
background: white;
animation: ripple 15s infinite;
box-shadow: 0px 0px 1px 0px #508fb9;
}
.small {
width: 200px;
height: 200px;
left: -100px;
bottom: -100px;
}
.medium {
width: 400px;
height: 400px;
left: -200px;
bottom: -200px;
}
.large {
width: 600px;
height: 600px;
left: -300px;
bottom: -300px;
}
.xlarge {
width: 800px;
height: 800px;
left: -400px;
bottom: -400px;
}
.xxlarge {
width: 1000px;
height: 1000px;
left: -500px;
bottom: -500px;
}
.shade1 {
opacity: 0.2;
}
.shade2 {
opacity: 0.5;
}
.shade3 {
opacity: 0.7;
}
.shade4 {
opacity: 0.8;
}
.shade5 {
opacity: 0.9;
}
#keyframes ripple {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.8);
}
}
<div class="row justify-content-center">
<div class='ripple-background'>
<div class='circle xxlarge shade1'></div>
<div class='circle xlarge shade2'></div>
<div class='circle large shade3'></div>
<div class='circle mediun shade4'></div>
<div class='circle small shade5'></div>
</div>
</div>
So I'm doing this for some lines on my webpage.
#keyframes dropHeader {
0% {
height: 0px;
}
100% {
height: 100%;
}
}
.slant-decor {
left: 50%;
height: 100%;
position: fixed;
display: inline-flex;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.6s;
}
.slant-decor:after {
width: 5px;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
content: "";
position: relative;
margin-left: -5px;
transform: skewX(-30deg);
display: inline-block;
}
.slant-decor div {
width: 19px;
height: 100%;
display: inline-block;
margin-left: -4px;
-ms-transform: skewX(-30deg); /* IE 9 */
-webkit-transform: skewX(-30deg); /* Safari */
transform: skewX(-30deg); /* Standard syntax */
}
.decor-orange {
background-color: orange;
}
.decor-red {
background-color: red;
}
.decor-green {
background-color: green;
}
<div class="slant-decor">
<div class="decor-red"></div>
<div class="decor-orange"></div>
<div class="decor-green"></div>
</div>
As of right now, the animation on .slant-decor works fine, however - as you can see, it causes a kind of a weird effect on the lines. What I'd like to achieve is that the animation follow the skew angle aswell, creating an effect where the lines would slide in from the top of the page, at the right angle. How could I achieve this?
If my understanding is correct, setting a transform-origin: right top would produce the effect that you are looking for. The default value for transform-origin is 50% 50% (the center-mid point of the element). When you animate the height, this point is constantly changing and hence creates that weird effect. If the transform-origin is set to a point that is fixed then that problem would be avoided.
#keyframes dropHeader {
0% {
height: 0px;
}
100% {
height: 100%;
}
}
.slant-decor {
left: 50%;
height: 300px;
position: fixed;
display: inline-flex;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.6s;
}
.slant-decor:after {
width: 5px;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
content: "";
position: relative;
margin-left: -5px;
transform-origin: right top;
transform: skewX(-30deg);
display: inline-block;
}
.slant-decor div {
width: 19px;
height: 100%;
display: inline-block;
margin-left: -4px;
transform-origin: right top;
transform: skewX(-30deg);
}
.decor-orange {
background-color: orange;
}
.decor-red {
background-color: red;
}
.decor-green {
background-color: green;
}
<div class="slant-decor">
<div class="decor-red"></div>
<div class="decor-orange"></div>
<div class="decor-green"></div>
</div>