i made this transform thing, and now i want it to start with being: transform: rotateX(15deg) rotateY(180deg); and then transform to normal(so it is doing it conversely), is that possible and how?
<html>
<head>
<title>Tester</title>
<meta charset="UTF-8">
<style type="text/css" >
div{
border-style: solid;
width: 350px;
height: 400px;
margin-top: 50px;
margin-left: 512px; }
p{
float: left;
font-size: 90px;}
.effect1
{
-moz-transition-duration: 2s;
transform: rotateX(15deg) rotateY(180deg);}
</style>
</head>
<body>
<div>
<p>some text</p>
</div>
<button>Magic</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$('button').click(function(){
box = $("div");
box.addClass('effect1');
});
</script>
</body>
Just add the transformations to the basic CSS, then set them to 0 for the effect class.
div{
border-style: solid;
width: 350px;
height: 400px;
transition-duration: 2s;
transform: rotateX(15deg) rotateY(180deg);}
p {
float: left;
font-size: 90px;}
.effect1
{
transition-duration: 2s;
transform: rotateX(0deg) rotateY(0deg);}
jsFiddle Expample
You can also make the button flip the box back and forth by using toggleClass in the jQuery: sample
Related
This question already has answers here:
how to flip the div using css?
(3 answers)
Closed 2 years ago.
i am trying to show backside of card on hover using css. i tried below code but its just roates front div and doesn't display back div. also i want to hide front div on hover. Can anyone fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
i try to solve you question and this is my answer....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
opacity: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
Just change
.content:hover .front {
transform: rotateY(180deg);
}
to
.content:hover .front {
display: none
}
Check out this
https://jsfiddle.net/1dsv7e6b/1/
Please add opacity:0;
.content:hover .front {
transform: rotateY(180deg);
opacity:0;
}
You could use CSS animations here to give the effect of the card flipping but then also being hidden.
The #keyframes defines the animation. Here it starts at 0% with no rotation and opacity of 1 (i.e. visible).
Then at 100% the animation is complete at the rotation is 180 degrees and opacity set to 0 so that it is hidden.
#keyframes flip-card {
0% {
transform: rotateY(0deg);
opacity: 1;
}
100% {
transform: rotateY(180deg);
opacity: 0;
}
}
You can then apply this on hover like so:
.content:hover .front {
animation: flip-card 1s;
animation-fill-mode: forwards;
}
You use the animation property to call the animation and also add how long it should take.
An example can be seen here:
https://jsfiddle.net/368jr1ts/
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
I stumbled across this website that lists CSS button animations. I have linked it --> https://buttonanimations.github.io/ I don't know if its just me but when I try to implement the animations into my website (Copy and paste) they just break. Is it on their end or mine, maybe they didn't input the animations correctly into the website.
(Currently using Safari) (I mean it should work right?)
The animations can be used by clicking on the animation on the page, copying the value:
.button_name:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.button_name { width: 300px; height: 45px; background-color: #cccccc; }
and putting the code in a stylesheet or <style> element.
Note that the .button_name selector should be replaced by the class(such as hover_button) that the element has when putting the code in a file or style element:
<button class="hover_button">Test</button>
.hover_button:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.hover_button { width: 300px; height: 45px; background-color: #cccccc; }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hover_button:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.hover_button { width: 300px; height: 45px; background-color: #cccccc; }
</style>
</head>
<body>
<button class="hover_button">Test</button>
</body>
</html>
So, you could do that but for me personally, I think the easiest way to do this would be to use the animation attribute in the section. Here is an example:
#popoutbutton {
font-family: 'Nanum Gothic', sans-serif;
border: 3px solid #666;
background-color: black;
cursor: pointer;
color: white;
transition: background-color 300ms ease-out 100ms;
}
#popoutbutton:hover {
background-color: grey;
}
<a
target="popup" onclick="window.open('WEBSITEURLHERE','popup','width=400,height=600'); return false;">
<button id="popoutbutton">Pop Out</button>
</a>
This, at least for me personally, is the easiest way to do this.
I successfully added css code to our squarespace site to make gallery images have the title of each image appear on hover. The problem is that the title leaves extra white space (about 15px) bellow each image. I want each image to be touching each other on top and bottom the same way they do on the sides.
My code is bellow, here is the link to the page: https://baikart.com/artists2
I've tried using padding code but that pushes the image around and I just want the white space gone.
.summary-content {
position: absolute;
color:#fff;
top: 50%;
left: 50%;
opacity: 0;
transition: all .5s ease;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
}
#Main-content {
.summary-content {
position: absolute;
color:#fff;
top: 50%;
left: 50%;
opacity: 0;
transition: all .5s ease;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
}
}
.summary-item:hover {
img {
-webkit-filter: brightness(50%);
filter: brightness(50%);
transition: all .5s ease;
}
.summary-content{
opacity: 1;
}
}
.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: rgba(0,0,0,0.8);
}
.container:hover .overlay {
opacity: 1;
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://cdn.pixabay.com/photo/2017/08/30/07/56/money-2696229_960_720.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Hope the solution will help
The following CSS, inserted via the CSS Editor, will remove the gap between images:
#collection-5d1bb9f4d43d220001cae017 .summary-thumbnail-container.sqs-gallery-image-container {
margin-bottom: 0;
}
The CSS targets the "Artists 2" collection specifically by using its collection ID, which is an id attribute set on the body element. That way, if you create a different collection that you want to format differently, it will be unaffected by the CSS. If you want to apply the style globally, remove the #collection-.... ID selector at the beginning and simply target via classes. It also means that, if you want to target a different collection (but without applying the styles globally), you'll need to update the collection ID in the selector above.
I am learning CSS transitions and transformations. here is HTML:
<!DOCTYPE html>
<html>
<head>
<title> Transformatons and Transitions</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/n.css">
</head>
<body>
<div class="animate">animate</div>
<div class="animate">animate2</div>
<div class="different">different1</div>
<div class="different">different2</div>
</body>
</html>
and the CSS is:
div.different {
transform: translate(1000px,400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition:1s ease-in-out;
}
div.different:hover{
background-color: red;
-webkit-transform: rotate(300deg);
}
The rotate is not working properly. instead of just rotating, the element is moving back the original place it was. Instead of staying at (1000px,400px) the element is going back to (0px,0px)
How do I prevent its moving?
You have to use translate on hover too because browser interpret your hover transform as translate(0,0) rotate(300deg):
div.different {
-webkit-transform: translate(1000px, 400px);
-ms-transform: translate(1000px, 400px);
transform: translate(1000px, 400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition: 1s ease-in-out;
}
div.different:hover {
background-color: red;
-webkit-transform: translate(1000px, 400px) rotate(300deg);
-ms-transform: translate(1000px, 400px) rotate(300deg);
transform: translate(1000px, 400px) rotate(300deg);
}
Define both transformations in the same statement and change them accordingly:
div.different {
transform: rotate(0deg) translate(1000px,400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition:1s ease-in-out;
}
div.different:hover{
background-color: red;
-webkit-transform: rotate(300deg) translate(1000px,400px);
}
Fiddle: https://jsfiddle.net/quvLtwjt/1/
You were overriding the previous transform.
But, if you want to rotate the div from the current position and not the old position then you need to use transform-origin to redefine the new position and put both transformations in the same statement:
div.different {
transform: rotate(0deg) translate(1000px,400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition:1s ease-in-out;
transform-origin: 1000px 400px;
}
div.different:hover{
background-color: red;
-webkit-transform: rotate(300deg) translate(1000px,400px);
}
Fiddle: https://jsfiddle.net/quvLtwjt/
I created a CSS 3D Transformation for a logo div within a header of my page. On hover the logo gets rotated. Everything looks fine in Chrome, but Firefox renders it completely different.
I moved the transform origin to the left side of the logo div. When rotating the right side of the div gets "compressed" to get the visual 3D effect. In Firefox the logo div only gets smaller but not "compressed" and you can't see a 3D effect.
The Code:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>test</title>
<style>
#header {
width: 940px;
margin: auto;
background-color: blue;
height: 350px;
position: relative;
-webkit-perspective: 800;
-moz-perspective: 800;
}
#logo {
width: 300px;
height: 80px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
-webkit-transition-duration: 0.25s;
-webkit-transform-origin: 0% 50%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotate3d(0,1,0,0deg);
-moz-transition-duration: 0.25s;
-moz-transform-origin: 0% 50%;
-moz-transform-style: preserve-3d;
-moz-transform: rotate3d(0,1,0,0deg);
}
#logo:hover {
-webkit-transition-duration: 0.5s;
-webkit-transform: rotate3d(0,1,0,45deg);
-moz-transition-duration: 0.5s;
-moz-transform: rotate3d(0,1,0,45deg);
}
</style>
</head>
<body>
<div id="header">
<div id="logo"></div>
</div>
</body>
</html>
Please try the following JSFiddle: http://jsfiddle.net/4CN5g/
Any idea what I'm doing wrong?