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?
Related
I'm trying to figure out how to make the carousel element stand still when hovered (keep it in the same position where the cursor is) but it keeps changing the position to the center of the whole thing like in this picture:
The idea is to build a 3D carousel that rotates till the user hovers over it, then it stops, the hovered element grows (inviting to click on it), and if unhover animation continues, but for some reason element keeps changing position :c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="../css/test.css"> -->
<title>Document</title>
</head>
<style>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 30s linear infinite;
}
#keyframes rotate {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(360deg);
}
}
.slider div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i)*40deg)) translateZ(350px);
background-color: black;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 2s;
}
.slider div:hover {
transform: translateY(-50px) scale(1.2);
}
.slider:hover {
animation-play-state: paused;
}
</style>
<body>
<div class="slider">
<div style="--i:1"><img src=""></div>
<div style="--i:2"><img src=""></div>
<div style="--i:3"><img src=""></div>
<div style="--i:4"><img src=""></div>
<div style="--i:5"><img src=""></div>
<div style="--i:6"><img src=""></div>
<div style="--i:7"><img src=""></div>
<div style="--i:8"><img src=""></div>
<div style="--i:9"><img src=""></div>
</div>
</body>
</html>
Do you guys know any solutions?
Apply the transformation to the image on hover instead of the div. I also updated the code a little to optimize it using CSS grid instead of absolute position:
body {
height: 100vh;
margin: 0;
display: grid;
place-content: center;
}
.slider {
display: grid;
width: 150px;
height: 150px;
transform-style: preserve-3d;
animation: rotate 30s linear infinite;
}
#keyframes rotate {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(360deg);
}
}
.slider div {
grid-area: 1/1;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i)*40deg)) translateZ(250px);
}
.slider img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 1s;
}
.slider div:hover img{
transform: translateY(-50px) scale(1.2);
}
.slider:hover {
animation-play-state: paused;
}
<div class="slider">
<div style="--i:1"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:2"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:3"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:4"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:5"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:6"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:7"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:8"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:9"><img src="https://picsum.photos/id/1051/200/200"></div>
</div>
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 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
I have a problem with Blurring and Flickering while css animation in Chrome.
First I have to say, yes i know the small Fix using:
-webkit-backface-visibility: hidden;
But in my case, I dont get it to work.
To Center a Container Im using following code:
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
The Width and the Height of this DIV is dynamic. Now the problem:
When this dynamic container has odd-numbered Pixel the text is blurry while any css animation. Just have a look at this fiddle:
https://jsfiddle.net/reuse52p/
When Im adding backface-visiblity, the container is the whole time blurry. Do you have any ideas, how I can fix this?
Sincerely
Try this code. some css hack will remove blur and flickering from it.
Add this properties to remove blur and flickering!
-webkit-perspective: 1000;
-webkit-font-smoothing: subpixel-antialiased;
backface-visibility: hidden;
transform: translateZ(0);
See demo below
$(document).ready(function() {
$(".anim").click(function() {
$(this).toggleClass("bigger");
});
});
.outer {
position: relative;
height: 500px;
width: 500px;
background: #ccc;
-webkit-perspective: 1000;
-webkit-font-smoothing: subpixel-antialiased;
}
.inner {
position: absolute;
width: 300px;
height: 300px;
background: #e5e5e5;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
.anim {
width: 100px;
height: 50px;
background: #fff;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -25px;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
transition: transform 1s ease;
-webkit-perspective: 1000;
-webkit-font-smoothing: subpixel-antialiased;
backface-visibility: hidden;
transform: translateZ(0);
}
.bigger {
transform: scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<h2>Flickering!</h2>
<div class="anim">Click me</div>
</div>
</div>
Reference
WebKit: Blurry text with css scale + translate3d
Blurry text after using CSS transform: scale(); in Chrome
I have given 2 div's that slides out from the right side of the screen when mouse hovers over it. One div contains an image and the other contains few labels and text boxes.I have pushed both the divs towards the right side so that only the feedback letters from my image is visible. My problem is when the site is viewed in different monitors the div is not where i positioned them earlier. it just moves out in random positions in different monitors. Please help.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body style="overflow-y: hidden">
<div id="slideout">![my outer div][1]
<img src="images/feedback_R.png" height="500px" width="800px" alt="Feedback" >
<div id="slideout_inner">
My Content goes here..
</div>
</div>
</body>
</html>
This is the CSS style that i used.
<style>
#slideout {
position: fixed;
top: 50px;
left: 1300px;
z-index: 5000;
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
transition-duration: 0.9s;
}
#slideout_inner {
position: fixed;
top: 180px;
z-index: 9999 ;
left: 1400px;
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
transition-duration: 0.9s;
text-align: center;
cursor: pointer;
}
#slideout_inner textarea {
width: 190px;
height: 100px;
margin-bottom: 6px;
}
#slideout:hover {
left: 800px;
}
#slideout:hover #slideout_inner {
left: 900px;
}
</style>
with px you cannot fix those images to all screen sizes except you use media-queries
or else you can make image with 0 px onload and on hover you can increase to 800px like this:
for ex:
use this style
#slideout {
position: fixed;
top: 50px;
z-index: 5000;
right: 0px;
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
transition-duration: 0.9s;
}
#slideout:hover img{
width: 100%;
}
img{
width: 0px;
float: right;
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
transition-duration: 0.9s;
}
this style increase width of image to 100% on hover in all screen sizes,if you are ok with this,apply it for feedback content also