I ran into this issue where I am trying to rotate this div on hover, but when I hover, it tries to hover but then it goes back to the normal position. could you please help?
here is my fiddle: https://jsfiddle.net/Lcb7okfn/
.section-tours{
background-color:pink;
padding:5rem 0 50rem 0;
}
.center-text{
background-color:blue;
padding:30px 0;
}
.col-1-of-3{
width: calc((100%-20px)/3);
}
.card{
background-color: orange;
height:15rem;
transition: all .8s;
perspective: 1000px;
-moz-perspective: 1000px;
}
.card:hover{
transform: rotateY(180deg);
}
Apply the hover to a parent element and also move the perspective declaration to the parent:
.section-tours {
background-color: pink;
padding: 5rem 0 50rem 0;
}
.center-text {
background-color: blue;
padding: 30px 0;
}
h2 {
padding: 0;
margin: 0;
}
.col-1-of-3 {
width: calc((100%-20px)/3);
perspective: 1000px;
}
.card {
background-color: orange;
height: 15rem;
transition: all .8s;
}
.col-1-of-3:hover .card {
transform: rotateY(180deg);
}
<section class="section-tours">
<div class="center-text">
<h2>
Most popular tours
</h2>
</div>
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card class_side">
TEXT
</div>
</div>
</div>
<div class="col-1-of-3">
</div>
<div class="col-1-of-3">
</div>
</div>
</section>
Related
I'm currently using Angular 8, would like to know how to do the following animation from the fave website https://discover.myfave.com/sg
Here's my code
steps.html
<div class="step-flow">
<div class="step">
<div class="title">Title 1</div>
<div class="step-progress step-progress-1"></div>
<div class="description">
this is the first section
</div>
</div>
<div class="step">
<div class="title">Title 2</div>
<div class="step-progress step-progress-2"></div>
<div class="description">
this is the second section
</div>
</div>
<div class="step">
<div class="step-progress step-progress-3"></div>
<div class="title">Title 3</div>
<div class="description">
this is the third section
</div>
</div>
</div>
steps.css
.step-flow {
width: 45%;
.step {
position: relative;
border-left: 4px solid $color-black;
margin-bottom: 2rem;
padding-left: 2rem;
.step-progress {
position: absolute;
left: -4px;
top: 0;
right: auto;
bottom: 0;
background: $color-yellow;
width: 4px;
}
.step-progress-1 {
animation: fillin 2s infinite;
}
.step-progress-2 {
animation: fillin 2s infinite 2s;
}
.step-progress-3 {
animation: fillin 2s infinite 4s;
}
.title {
font-size: 1.5rem;
font-weight: 900;
margin-top: 1rem;
margin-bottom: 0;
}
.description {
margin-top: 0.5rem;
margin-bottom: 2rem;
}
}
}
#keyframes fillin {
0% {
height: 0;
}
100% {
height: 100%;
}
}
The animation just flows at the same time. How do I make it flow step by step? Do I use step() in css? Would like to achieve the same effect as the fave website, thank you :)
Appreciate your help, thanks!
I'm trying to emulate flipbook-vue component, but with pure CSS.
I would like to combine that component with this CSS example on CodePen.
On the flipbook-vue side, I like how the book remains centered when the first page opens, is that possible to do with CSS only? I tried, but the book doesn't expand as the cover rotates.
Also, do the pages need to go backwards like on CodePen example?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page flip</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
text-align: center;
}
div {
height: 100%;
}
#book {
border: 1px solid blue;
display: inline-block;
background: #eee;
text-align: center;
}
div.page {
border: 1px solid red;
width: 40vw;
height: 60%;
}
div.page.flipped {
transition: transform 1s;
transform: rotateY(180deg);
transform-origin: left center;
}
</style>
<script>
window.onload = () => {
setTimeout(flipPage, 1000);
}
flipPage = () => {
document.getElementById('page-1').classList.add('flipped');
}
</script>
</head>
<body>
<div id="book">
<div class="page" id="page-1">
PAGE 1
</div>
<div class="page" id="page-2">
PAGE 2
</div>
</div>
</body>
</html>
I think I'm happy enough with the solution I came up with
var page = 1;
var timerId = null;
window.onload = () => {
timerId = setInterval(flipPage, 1000);
}
toggleClass = (id, cssClass) => {
document.getElementById(id).classList.toggle(cssClass);
}
flipPage = () => {
if (page === 1) {
toggleClass('book', 'two-pages');
} else if (page === 8) {
toggleClass('book', 'closed');
toggleClass('book', 'two-pages');
clearInterval(timerId);
}
toggleClass('page-' + page, 'flipped');
page ++;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--page-width: 40vw;
--transition-speed: 2s;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
perspective: 400vw;
background: #ccc;
}
body, .page > div {
display: flex;
align-items: center;
justify-content: center;
}
#book, .page {
width: var(--page-width);
height: 80vh;
}
#book {
transform-style: preserve-3d;
backface-visibility: visible;
flex-shrink: 0;
transition: var(--transition-speed) all ease;
position: relative;
margin: 0 auto;
}
#book.two-pages {
width: calc(2 * var(--page-width));
}
#book.closed {
width: calc(3 * var(--page-width));
}
.front, .back {
background: navy;
}
.page {
background: white;
border: 1px solid red;
position: absolute;
right: 0;
}
div.page.flipped {
transform: rotateY(180deg);
transition: transform var(--transition-speed);
transform-origin: left center;
}
.page > div {
position: absolute;
width: 100%;
height: 100%;
}
.page > div.back-face {
opacity: 0;
}
.page.flipped > div.front-face {
transition-property: opacity;
transition-delay: calc(0.3 * var(--transition-speed));
opacity: 0;
}
.page.flipped > div.back-face {
opacity: 0;
}
.page.flipped > div.back-face {
transition-property: opacity;
transition-delay: calc(0.3 * var(--transition-speed));
opacity: 1;
}
#page-1.flipped {
transform: rotateY(-180.04deg);
}
#page-2.flipped {
transform: rotateY(-180.03deg);
}
#page-3.flipped {
transform: rotateY(-180.02deg);
}
#page-4.flipped {
transform: rotateY(-180.01deg);
}
#page-5.flipped {
transform: rotateY(-180.0deg);
}
#page-6.flipped {
transform: rotateY(-179.99deg);
}
#page-7.flipped {
transform: rotateY(-179.98deg);
}
#page-8.flipped {
transform: rotateY(-179.97deg);
}
<div id="book" class="book">
<div class="page back" id="page-8">
<div class="front-face">PAGE 8</div>
<div class="back-face">BYE</div>
</div>
<div class="page page6" id="page-7">
<div class="front-face">PAGE 7</div>
<div class="back-face"></div>
</div>
<div class="page page5" id="page-6">
<div class="front-face">PAGE 6</div>
<div class="back-face"></div>
</div>
<div class="page page4" id="page-5">
<div class="front-face">PAGE 5</div>
<div class="back-face"></div>
</div>
<div class="page page3" id="page-4">
<div class="front-face">PAGE 4</div>
<div class="back-face"></div>
</div>
<div class="page page2" id="page-3">
<div class="front-face">PAGE 3</div>
<div class="back-face"></div>
</div>
<div class="page page1" id="page-2">
<div class="front-face">PAGE 2</div>
<div class="back-face"></div>
</div>
<div class="page front" id="page-1">
<div class="front-face">HELLO</div>
<div class="back-face">TO</div>
</div>
</div>
I've never felt so silly asking a SO question... but here is goes.
I've created a skew which works a charm, see here
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, -7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, 7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
But when I try to make the skew the opposite way round, everything just turns into mayhem and I have no idea why this is happening - surely it's just reversing the numbers of the skew around? This is my code...
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(-7deg, 0deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(7deg, 0deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
Can somebody put me out of my misery here? PS- I apologise in advance for being a plonker.
The reason it doesn't work is because skew(ax, ay). If you simply reversed the angles, you would be changing x-axis instead of y-axis. So use an inverse angle instead. 7deg becomes -7deg
Read about skew here.
Do it like this:
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, 7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, -7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
Here is an example of how you can achieve the same result using :before selector. Less nesting.
.container {
text-align: center;
height: 300px;
width:900px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.container:before {
content: "";
position: absolute;
background: darkOrange;
height:100%;
width: 200%;
transform: rotate(15deg);
top: -35%;
left: -25%;
z-index: -1;
}
h1 {
z-index: 1;
color: white;
width: 100%;
line-height: 120px;
text-align: center;
}
<div class="container">
<h1>Exmaple </h1>
</div>
Using this method, the text will not be skewed
change the -7 into a 7 in the skew
and for the content flip them over so ts like this skew(0deg, -7deg)
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, 7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, -7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
I have a set of tabs that each contain a child element that animates. What happens when I click each tab is that the animation of the child element within the tab runs. I do not want it to run. I want the animation to run the first time then not replay when it's parent switch from display:none to display:block.
In the example I made below I have 2 parent divs, each with a child div that animates over to the right. When each parent is set to block the animation replays, I do not want that to happen. I want each child to stay positioned over to the right. How can I make that happen?
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.parent {
display: none;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39);
}
.active {
display: block;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
Fiddle Demo
Yes, animations will restart every time the display value is changed from none to something else.
As per W3C Spec: (emphasis is mine)
Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants. If an element has a display of ‘none’, updating display to a value other than ‘none’ will start all animations applied to the element by the ‘animation-name’ property, as well as all animations applied to descendants with display other than ‘none’.
There is no direct way to prevent this from happening because that is the intended behavior. You can workaround the situation by using other methods to hide the element instead of using display: none.
Following are a few suggestions on how the element could be hidden without display: none. It is not mandatory to use only one of the following workarounds, it could be some other way also as long as it doesn't involve changing the display property of the element.
Using height: 0, width: 0, overflow: hidden to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.parent {
height: 0;
width: 0;
overflow: hidden;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
height: auto;
width: auto;
overflow: visible;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
Adding a container, using position: absolute and opacity: 0 to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
opacity: 0;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
opacity: 1;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
Adding a container, using position: absolute and visibility: hidden to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
visibility: hidden;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
visibility: visible;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
Adding a container, using position: absolute and z-index to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
z-index: -1;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
z-index: 1;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>