Below is the my code
http://liveweave.com/ks0njD
html:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
and CSS:
.container {
width: 300px;
height: 300px;
border: 1px solid black;
backface-visibility: hidden;
perspective: 1000px;
}
.box1 {
position: relative;
width: 100px;
height: 2px;
background: black;
top: 100px;
left: 200px;
transform: rotate(45deg);
transition: .5s;
backface-visibility: hidden;
perspective: 1000px;
}
.box2{
position: relative;
width: 100px;
height: 2px;
background: black;
top: 100px;
left: 200px;
transform: translateY(68px) rotate(-45deg);
backface-visibility: hidden;
transition: .5s ease;
perspective: 1000px;
}
.container:hover .box1{
transform: rotate(60deg);
transition: .8s ease;
backface-visibility: hidden;
}
.container:hover .box2 {
transform: translateY(84px) rotate(-60deg);
transition: .8s ease;
backface-visibility: hiddeni;
}
As you can see, when the divs rotate there is slight distortion, is there anyway i can make this look perfect ? i tried using backface and perspective but doesnt makes any difference.
#Amer what you mean from 'look perfect'? Something like this?
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
.container {
width: 300px;
height: 300px;
border: 1px solid black;
backface-visibility: hidden;
perspective: 1000px;
}
.box1 {
position: relative;
width: 100px;
height: 15px;
background: black;
top: 112px;
left: 200px;
background:#3ac7f2;
transform: rotate(45deg);
transition: .5s;
backface-visibility: hidden;
perspective: 1000px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.box2{
position: relative;
width: 100px;
height: 15px;
background: black;
top: 93px;
left: 200px;
background:#3ac7f2;
transform: translateY(68px) rotate(-45deg);
backface-visibility: hidden;
transition: .5s ease;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.container:hover .box1{
background:#09F;
transform:background .4s ease-in-out;
transform: rotate(-45deg);
transition: .8s ease;
backface-visibility: hidden;
}
.container:hover .box2 {
background:#09F;
transform:background .4s ease-in-out;
transform: translateY(68px) rotate(45deg);
transition: .8s ease;
backface-visibility: hiddeni;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
Related
I want to rotate my element repeatedly, without back flip. When I call my function first time it will rotateX('180deg'), and the second will be rotateX('360deg') but the problem when I call third time it will be backflip, so any idea to make this flip keeping forward without back flip?
function myFunction() {
if (document.getElementById("front").style.transform == "" || document.getElementById("front").style.transform == "rotateX(0deg)") {
document.getElementById("front").style.transform = "rotateX(180deg)";
document.getElementById("back").style.transform = "rotateX(0deg)";
} else if (document.getElementById("front").style.transform == "rotateX(180deg)") {
document.getElementById("front").style.transform = "rotateX(360deg)";
document.getElementById("back").style.transform = "rotateX(180deg)";
} else {
document.getElementById("front").style.transform = "";
document.getElementById("back").style.transform = "rotateX(-180deg)";
}
}
.flipcard {
position: relative;
width: 220px;
height: 160px;
perspective: 500px;
}
.flipcard.h .back {
transform: rotateX(-180deg);
}
.flipcard .front,
.flipcard .back {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.5s ease-in;
color: white;
background-color: #000;
padding: 10px;
backface-visibility: hidden;
}
<div class="flipcard h">
<div class="front" id="front">
This is the front side
</div>
<div class="back" id="back">
This is the back side
</div>
</div>
<button onclick="myFunction()">Flip The Image</button>
Simplify DOM, simplify JS and optimize CSS.
This is the best way to make a spinning card:
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
body { font-family: sans-serif; }
.card {
position: relative;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card.is-flipped {
transform: rotateX(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateX(180deg);
}
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
You can do something like this:
$('#btnClick').click(function() {
$('.flip-container').toggleClass("flipped");
});
.flip-container.flipped .flipper {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
position: relative;
}
.flip-container,
.front,
.back {
width: 200px;
height: 200px;
}
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 500;
cursor: pointer;
top: 0;
width: 200px;
height: 200px;
}
.flip-container .back {
transform: rotateX(-180deg);
background-color: #000;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
width: 200px;
height: 200px;
display: block;
}
.flip-container .front,
.flip-container .back {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.6s ease-in;
color: white;
background-color: #000;
padding: 10px;
backface-visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p>This is the front side </p>
</div>
<div class="back">
<p> This is the back side </p>
</div>
</div>
</div>
<button id="btnClick">Flip The Image</button>
I wanted to create a div which has a background image and a transparent background color over it with some text. When hover, the transparent background color should slide out towards the bottom of the div as shown in the image:
https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
Left block is default. Right block is hover state.
I modified this snippet: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I modified the provided style to:
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container .overlay {
opacity: 0.75;
}
.container:hover .overlay {
opacity: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
Edited:
My Problem
I tried to achieve a simple slideout animation on my as shown in the image I provided. See this: https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
I have tried something like this - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I edited the css they provided to the css I provided above.
Please see the image I provided. I wanted to achieve that.
Try this.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
transition: .5s ease;
height: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Hope this code may help you.
Hi hope this is what you are looking for
Try this fiddle
.container:hover .overlay {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
opacity: 1 !important;
}
hope this is what you are looking
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;}
http://jsfiddle.net/jxgrtmvy
Can someone explain why does the image slide back nicely and the text disappears right away when you hover out?
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#image {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper:hover #image {
transition: 1s;
left: -100px;
}
.wrapper:hover .text {
transition: 1s;
left: 50%;
}
.text {
white-space: nowrap;
//color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 150%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="wrapper">
<img id="image" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
<div class="text">text</div>
</div>
So what I want is that the text also slides out nicely on hover out and not just disappear.
You also need to add the transition property to the .text:
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#image {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper:hover #image {
transition: 1s;
left: -100px;
}
.wrapper:hover .text {
transition: 1s;
left: 50%;
}
.text {
white-space: nowrap;
//color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 150%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: 1s;
}
<div class="wrapper">
<img id="image" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" alt="">
<div class="text">text</div>
</div>
How can I achieve the desired effect? I want to create a kind of box that flips around in 3d in the x axis and reveals the other face, all while conserving the same dimensions. Currently the effect is almost working but for some reason one face is always visible. Why does that happen and how to change that?
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
Just add this css properties,
#div2 { z-index: 1;}
#div1:hover #div2 { z-index: 0;}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
z-index: 1;
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
z-index: 0;
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
Add backface-visibility:hidden;
div {
backface-visibility: hidden;
}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
I have the banner on my website to display some clouds.
You can see it here: http://sharix.dyndns.org/StackOverflowVisible.php
These clouds should be confined within the banner box. This was working until today. It stopped without me touching anything. Now they seem to ignore the overflow: hidden; rule in the default.css file.
Adding a second overflow: hidden; rule to the #world div seems to work, but it breaks the transform-style: preserve-3d; rules. You can see it here: http://sharix.dyndns.org/StackOverflowHidden.php
How to have both the 3d-transforms and the overflow rules working, like it was until today?
The interesting part of the default.css file:
#header {
background: #4b6983;
border: 2px solid #7590ae;
text-align: center;
padding: 0px;
margin: 10px 10px 0px 10px;
color: #ffffff;
text-shadow:0px 1px 5px black;
}
#viewport {
overflow: hidden;
background-image: $gradient;
background-image: $oGradient;
background-image: $mozGradient;
background-image: $webkitGradient;
background-image: $msGradient;
}
#header-content:hover {
z-index: 2;
transform: translateZ( 1px );
-moz-transform: translateZ( 1px );
-webkit-transform: translateZ( 1px );
-o-transform: translateZ( 1px );
-ms-transform: translateZ( 1px );
}
#world:before {
content: "";
background: url(zvezde.png);
opacity: $starOpacity;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
#world {
overflow: hidden; /*added today to confine the clouds. breaks preserve-3d*/
position: relative;
top:-100px;
height: 150px;
width:140%;
margin-left:-20%;
margin-bottom:-100px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
pointer-events:none;
}
.cloudBase {
position: absolute;
left: 50%;
top: 250px;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
}
.cloudLayer {
/* display:none; */
position: absolute;
left: 50%;
top: 50%;
width: 256px;
height: 256px;
margin-left: -128px;
margin-top: -128px;
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
HTML:
<body>
<div id="page">
<div id="header">
<div id="viewport">
<div id="header-content">
<h1>Title text</h1>
☁ ☁ ☁
</div>
<div id="world"></div>
</div>
<script type="text/javascript" src="/scripts/oblaki-full.js"></script>
</div>
<div id="footer">
10. April 2013 ~ server uptime: 5:23 ~ load averages: 0.32, 0.39, 0.45 </div>
</div>
</body>