I've been working to make a simple 3d perspective carousel that works across modern browsers for a prototype. I found this codepen and have been working off of it with much success.
The only issue is in Safari it rotates off of the proper 50% 50% origin:
Container:
figure#spinner {
transform-style: preserve-3d;
height: 300px;
transform-origin: 50% 50% -500px;
transition: 1s;
}
Child images:
figure#spinner img {
width: 40%; max-width: 425px;
position: absolute; left: 30%;
transform-origin: 50% 50% -500px;
outline:1px solid transparent;
}
I've gone through Desandro's 3d perspective carousel tutorial to try to figure out the issue with no luck.
Anybody have any idea how to get this to work in Safari off of the codepen? Are there webkit specific issues with the way this is set up?
Related
I have problem on Chrome browser while combining two properties: filter: blur(15px) and transform: scale3d(1.2,1.2,1).
I have two images, one over another. Image on higer layer is blurred, but it's edges got transparent when I applied that filter, so I added overflow:hidden to parent div, and scaled up image. I expected to see just opaque part of image.
It works as expected on Firefox and Opera, however on Chrome and MS Edge browsers not. How to fix this?
#images-box{
position: relative;
width: 500px;
height: 280px;
overflow:hidden;
}
.image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images.unsplash.com/photo-1558389157-a986a38f3431?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
background-size: cover;
background-position: 50% 50%;
}
.image.blured{
-webkit-filter: blur(14px);
filter: blur(14px);
z-index: 2;
-webkit-transform: scale3d(1.2,1.2,1);
transform: scale3d(1.2,1.2,1);
}
<div id="images-box">
<div class="image"></div>
<div class="image blured"></div>
</div>
Changing scale3d(1.2,1.2,1) to scale(1.2) helped me on Chrome 86.0.4240.198.
Im building an isometric grid of cubes created with css but im running into an issue with outlines.
Heres what I would like to achieve:
cube design
But heres what i've got so far:
html cube
I've tried the usual tricks like using some translateZ and backface visibility but to no avail.
My css is looking like this:
.cube {
transform: rotateX(55deg) rotateZ(45deg) translateX(50%) translateY(-50%);
transform-origin: 0% 0%;
transform-style: preserve-3d;
position: relative;
pointer-events:all;
transition: background-position ease 7s;
background-size: 400% 400%;
div {
position: absolute;
transition: background-position ease 7s;
backface-visibility: hidden;
&:first-child {
transform-origin: center top;
width: 100%;
height:100%;
transform: rotateX(-90deg);
top: 100%;
}
&:nth-child(2) {
transform-origin: left center;
width: 100%;
height: 100%;
left: 100%;
transform: rotateY(90deg);
}
}
Any ideas would be hugely appreciated.
codepen link
The trick here would be to have the faces of the cubes to overlap and use the background-blend-mode CSS attribute to have them blend into each other. That causes the cubes to blend into each other and get rid of the weird borders.
Working codepen link here: https://codepen.io/anon/pen/LXzWjJ
You might need to play around with the transforms and dimensions a bit to get the exact result you want.
It's not the best solution but it seems to work.
Hope this helps!
My goal is to create a little slideshow, and I already made it here : https://jsfiddle.net/cas1g2ch/2/
Here's the code :
HTML
<div id="first-block">
<div id="background-header">
<div class="bg-wrapper">
<div class="background-img-1"></div>
</div><!--
--><div class="bg-wrapper">
<div class="background-img-2"></div>
</div>
</div>
</div>
CSS
#first-block{
position: relative;
width: 100%;
height: 100vh;
}
#keyframes zoomPicture {
0%{
transform: scale(1.0);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1.0);
}
}
#background-header{
position: absolute;
top : 0;
left : 0;
width: 200vw;
height: 100vh;
box-shadow: 0px 1px 1px #333;
}
#background-header > .bg-wrapper
{
width: 100vw;
height: 100vh;
display: inline-block;
float: left;
overflow: hidden;
}
#background-header > .bg-wrapper > div{
width: 100vw;
height: 100vh;
background-attachment: fixed;
animation-duration: 20s;
background-size: cover;
animation-timing-function: ease-in-out;
animation-name: zoomPicture;
animation-iteration-count: infinite;
}
#background-header .background-img-1 {
background-image: url("http://www.hd-wallpaper.images-fonds.com/modules/mg3/albums/Paysages_(landscapes)_Wallpaper_HD/Paysages/Paysage_(landscape)_wallpaper_HD_0025.jpg");
}
#background-header .background-img-2 {
background-image: url("http://unreveunvoyage.fr/wp-content/uploads/2015/04/parc-national-de-banff-paysage-canada.jpg");
}
Right now the slideshow has two pictures, and each picture covers the entire screen size (width : 100vw ; height : 100vh ; background-size : cover).
To display the pictures I used background-image, and the backgrounds are fixed.
Because I cannot animate a background with background-size : cover, I used transform : scale to add a little zoom effect.
The problems :
On Chrome there's a weird Glitch (Chrome 56 on Windows), just use the scrollbar
in the demo to see the problem, here's a video I made that shows the
problem : https://www.youtube.com/watch?v=NHCLBTpxCAs (In this video I chose a high transform: scale value to better recognize the bug)
On Firefox the backgrounds are not fixed, but the pictures are
displayed correctly
Surprisingly it works great on Internet Explorer 11
It also seems to work on mobile
How can I fix this? What is the best workaround?
I would like to bring some more interactive elements into my webpage.
What i've seen before on some website's, is that the background image zoom's in slowly and back out. So that it looks more like a living thing.
I've been searching on the internets and here. But i dont know how this technique is done exactly and i dont know the name for this kind of effect.
I also think this should be fairly easy to achiev this with some CSS3 and HTML5.
The questions are:
Is there a name for this effect and what is it called?
Can it be done with pure CSS?
Is there a sample online availble for the basics?
Here is the html i had in mind:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test page</title>
<style>
body {
background-image: url("http://wallpapercave.com/wp/LXR5gFx.png");
background-size: 100% auto;
}
</style>
</head>
<body>
</body>
</html>
The goal is to let the background image zooming in slowly and back out. Like it is breathing.
There is mainly 2 different ways, using either animation or transition.
animation is normally better when one want something running all the time, and transition is more efficient for e.g. hover effects.
Here is a start using animation.
Stack snippet
html, body {
height: 100%;
margin: 0
}
#keyframes breath {
0% { background-size: 100% auto; }
50% { background-size: 140% auto; }
100% { background-size: 100% auto; }
}
#bkg{
width: 100%;
height: 100%;
animation: breath 4s linear infinite;
background: url("http://wallpapercave.com/wp/LXR5gFx.png") center center no-repeat;
}
<div id="bkg"></div>
And here is another using transition and :hover.
Stack snippet
html, body {
height: 100%;
margin: 0
}
#bkg {
width: 180px;
height: 180px;
position: relative;
overflow: hidden;
}
#bkg::before {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url("http://wallpapercave.com/wp/LXR5gFx.png");
background-position: center;
background-repeat: no-repeat;
transition: transform .5s linear;
}
#bkg:hover::before{
transform: scale(1.3);
}
<div id="bkg"></div>
What you are looking for is called keyframes.
This is the code in the following example.
#keyframes zoom {
0% { transform:scale(1,1); }
50% { transform:scale(1.2,1.2); }
100% {
transform:scale(1,1);
}
}
Css transform has properties which can br run "frame by frame", in the above, we want the picture to be zoomed by the factor 1.2 on the x and y axis by the time 50% of the animation have passed.
We start at no zoom, zoom it by 20% and then we go back tot he original state.
And here is how we add this to the class:
animation: zoom 30s infinite;
just add that to your class and it will run. There are more parameters, but this gets complicated for someone who is unfamiliar with, thus, an easy example.
Here the link to the codepen in action
http://codepen.io/damianocel/pen/QyqRgw
You want to use a separate element with transform(), for three reasons:
It will use the GPU to render the element
It will be more performant in terms of FPS more on that
Animating the body background will cause the entire page to repaint on every frame
Also, animating the background-position will create a juggle effect, as the browser will try to round the position to the nearest pixel.
With a transform: scale() on the other hand, the browser will position the element with subpixel rendering, resulting in a way smoother movement.
#keyframes breath {
from {
transform: scale(1);
}
to {
transform: scale(1.05)
}
}
div{
width: 100vw;
height: 100vh;
animation: breath 2s ease-in-out alternate infinite;
background: url("https://www.placecage.com/800/600");
background-size: cover;
}
body {
margin: 0;
}
<div></div>
In Google Chrome, when you have two elements, one that has a CSS3 animation and another with a background-image with a fixed position and an absolute positioned parent (important to keep that), the fixed property stops working when the animation is active.
Here is a JSFiddle, open in Chrome, scroll up and down to see the image be fixed, and then hover over the red square to see the fixed property break:
http://jsfiddle.net/keleturner/44mjq/
<div class="animation">
</div>
<div class="background">
<span></span>
</div>
.animation { display: block; width: 300px; height: 300px; background: red; -webkit-transition: 1.8s -webkit-transform ease; }
.animation:hover { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);}
.background { position: absolute; left:0; top: 300px; display: block; width: 100%; height: 500px; }
.background span { background-attachment: fixed; background-size: cover; background-image: url(http://image.jpg); width: 100%; height: 100%; display: block; }
Any ideas why?
Why not make the body element have the background? Demo
But to answer your question, it's rendering error due to the body increasing size due to the scale. To fix it add -webkit-transform:translateZ(1px); to either .animation or .background
But your setup is a silly one to have, it can be done in much better ways