CSS3 3D transforms + animations are great. I'm wondering if there is a way to make something bend.
This example flips the (paper) div but the animation looks stiff because, in real, when you flip paper, it bends a bit.
So any properties I overlooked or maybe a combination that makes it look like it bends?
div {
width: 90%;
height: 700px;
position: fixed;
left: 5%;
top: 0;
background-color: rgba(0,0,0,0.9);
-webkit-transform: perspective(1000);
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: top;
-webkit-animation: "page curl down" 1s ease-out forwards;
}
#-webkit-keyframes "page curl down" {
from {
-webkit-transform: rotate3D(1,0,0,180deg);
}
to {
-webkit-transform: rotate3D(0,0,1);
}
}
Example page curl with bending (image): http://numerosign.com/software/css3machine/#documentation
No. The best way is to use canvas then slide an image across, like this: http://www.20thingsilearned.com/. Here's a breakdown of how that works: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html
There are many limitations with that method, but it's the best I've seen.
Browser elements are currently limited to occupying a single flat plane. No matter what. I've wrestled with the idea of simulating curved <div>s for some time with no notable progress.
Using a transparent object with a border, border-radius and matrix3d can create "bends", but that's about as far as that goes. If you specify border-top only, with border-top-left-radius set, you can create a straight line with a curved end. Obviously, this is still part of a single flat plane, bending in the direction of its sibling 2-dimensional axis.
As soon as we begin thinking of bending your 2-dimensional element in the 3rd dimension it does not currently occupy, it literally becomes impossible without Canvas, WebGL, or other rendering engines.
Related
This is a bit of a long-winded question, but I hope someone can break this down for me. I have 2 questions:
Why a CSS property doesn't do what it should.
Why this particular CSS property works on an unsuspecting element, and why it doesn't work on the CSS :hover selector.
Created a flipcard animation. Got some graphics/trailing lines issues with transitions (in Chrome).
Doing some Googling, I found out that apparently, using -webkit-transform: translate3d(0,0,0); is supposed to fix the issue by using hardware acceleration.
However, I couldn't figure out where to place this CSS property. I tried placing it on the .flipcard-container, .flipcard, on the actual transition (.flipcard-container: hover .flipcard).
None of these removed the trailing lines caused by the animation.
Question 1: Where can I use the -webkit-transform: translate3d(0,0,0); properly in order to take advantage of the hardware acceleration, and why does/doesn't it work there?
But, after doing even more Googling and copying someone else's code, I found adding perspective: 600pxto the .flipcard-container somehow fixed the issue. And on top of that, it even makes my animation look really nice.
It shouldn't bother me so much, but it does that I cannot figure out why this worked.
According to the MDN docs:
The perspective CSS property determines the distance between the z=0
plane and the user in order to give a 3D-positioned element some
perspective.
Question 2: Why does this work in my transition so well? Shouldn't I have to place perspective in .flipcard-container: hover .flipcard instead of the .flip-container?
Of course, when placing it in the css :hover selector, the entire transition stops working. Does the perspective property also use hardware acceleration?
Here is the code, and thank you in advance.
.flipcard-container {
height: 400px;
width: 300px;
/* uncommenting the below property will fix the issue */
/* -webkit-perspective: 600; */
}
.flipcard-container:hover .flipcard {
transform: rotateY(180deg) scale(1.5);
}
.flipcard, .front, .back {
width: 100%;
height: 100%;
}
.flipcard {
transform-style: preserve-3d;
transition: all .8s ease-in-out;
}
.front {
background: #6093e5;
position: relative;
backface-visibility: hidden;
}
.back {
background: #e56060;
position: absolute;
backface-visibility: hidden;
top: 0;
transform: rotateY(180deg);
}
<div class="flipcard-container">
<div class="flipcard">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
Question 1
You are overriding the transform: tags with the hardware acceleration. This causes that the animation doesn't work if you put it in.
You can use this, to archive better (more stable fps)
.flipcard-container:hover .flipcard {
transform: rotateY(180deg) scale(1.5);
will-change: -webkit-transition;
will-change: transition;
}
it uses the new will-change property.
More details
The will-change CSS property provides a way for authors to hint
browsers about the kind of changes to be expected on an element, so
that the browser can setup appropriate optimizations ahead of time
before the element is actually changed. These kind of optimizations
can increase the responsiveness of a page by doing potentially
expensive work ahead of time before they are actually required.
Question 2
If you look at e.g. this:
https://codepen.io/jfcorugedo/pen/bBPWaO?q=3d+turn&limit=all&type=type-pens
you see that it also uses the perspective tag. It is used that you can see the rotation of the box (like in your case).
If you remove it, it looks like your code. It works only on the container because the object you want to flip is wrapped in it.
If you have more questions just ask :)
If i have an animated element followed by another non-animated element, banding effect and various color shifting bugs appear in Chrome. Hard to see, but i recorded a video(if you zoom in on the page, the color shifts, easier to see): https://d26dzxoao6i3hh.cloudfront.net/items/1w1k2e3v0g04142U2A3H/Screen%20Recording%202017-10-30%20at%2011.35%20PM.mov
header {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #263238;
}
header a {
animation: scroll-down-anim 1s infinite;
}
#keyframes scroll-down-anim {
0% {
transform: translateY(0);
}
100% {
transform: translateY(10px);
}
}
<header>
Animated element
</header>
<p>if i remove this, the glitch disappears</p>
Any ideas how to fix this? If i remove the <p> element, it works. Also works on any other browser, like Safari.
Well this actually works for me, so I strongly suspect that it's just your graphics card or version of Chrome that's having issues.
However I would suggest that the reason it's happening is that the translate style forces Chrome to render using the GPU and having the P tag there is giving it a hard time.
If you were to force the P tag to use the same translation too then that might fix the issue for you, like this:
p {
transform: translateY(0);
}
it has nothing to do with chrome or your codes
Its your gpu ! specially if you have a m series Gpu (laptop to be exact)
so what happens is when you're using a ratio or a resolution higher or lower than your monitors native settings you put too much pressure on the gpu !
Update your graphics software by the os itself or bring the resolution back to its factory resolution
When i put transform: scale(1.1); on hover on some element the image became blurry. How to fix this bug?
Example
Try this, it's work fine for me!
img {
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
}
TL;DR
transform: scale is actually scaling the original image, and because you are leaving it to the browser's render engine to figure out what should go there you got a blurry image. try
img {
transform: scale(.9)
}
img:hover {
transform: scale(1)
}
Aaron Sibler answered the question for me.
I just experienced this riddle. In your example, you’ll
need to transform img DOWN something like “transform: scale(0.7)” and
then scale UP to the images native dimensions on hover like
“transform: scale(1.0)”
The scale value is relative to the original image’s dimensions – not
their current dimensions on screen so a scale of 1 always equals the
original image’s dimensions.
I’ve used this here;
http://meetaaronsilber.com/experiments/css3imgpop/index.html
I had this problem with SVG scaling and blurry images. I scaled up a background image to 4.5 and the image rendered very blurry while scaling up.
I read that you can scale down first transform: scale(0.7) and then scale up to transform: scale(1.0). In my case this meant a huge rebuild of my animation. I had a very complex animation with multiple scales and transforms etc.
I just left all as is and added a pseudo scale width. The browser then seems to re-render every frame, but since the width does not actually change you still can use
transform: scale(x.x) for scaling and you get a very sharp image.
Maybe someone can confirm this. Here is my code. In my case the image was 86px wide and it zoomed up to 4.5 times the initial value.
<div class="overall-scale">
<div class="image-scale"></div>
</div>
#keyframes overall-scale {
0% {
transform: scale(1);
}
100% {
transform: scale(4.5);
}
}
#keyframes image-scale {
0% {
width: 86px;
}
100% {
width: 86px;
}
}
Hope this helps and my explanation makes sense.
Please comment if this does not work for you.
I' ve read all the comments, and tryied all solutions people suggested. But nothing was really good except rotate(360deg). Everything, except this one made stuttering on images, or they became too blurry initially. But rotating is looking strange if you don't hide it. So I decided to rotate for 0.0000001deg and it worked! Image is blurry only during the transition, but at the end and at the start of it it is sharp. May be I just had too small pictures.
So, my current solution is adding this part to CSS (and nothing else):
img {
transform: rotate(0.00000000001deg);
}
I have been playing with transitions all morning and am at a road block. I have the need to have an image "tilt" forward when hovered over. Basically we have beer taps that when they hover over they want them to tilt as if they are being pulled down. I have played with a bunch of code but right now have nothing remotely close to post here. If anyone could give some help on how to accomplish this in css3 it would be greatly appreciated.
Below is a basic version (works in safari & chrome). You can play with the perspective values to change the effect.
I'm not sure where you were running into trouble, but the key points here are:
container to hold the rotated elements that will allow you to use perspective
perspective to change the overall look of the animation
transform-origin to set the rotation point of the image (using the bottom in the demo)
rotateX to rotate around the x axis - tilting the image toward/away from the viewer
html:
<div class="container">
<img src="http://placekitten.com/200/300" width="200" height="300"></img>
</div>
CSS:
.container {
-webkit-perspective: 1000px;
perspective: 1000px;
margin: 2em;
transform-style: preserve-3d;
}
img {
transition: all .5s ease;
-webkit-transform: rotateX(0deg);
-webkit-transform-origin-y: 300px; /* rotates from the bottom of the image */
}
img:hover {
-webkit-transform: rotateX(-40deg);
}
Demo jsFiddle
CSS Supports X and Y 3D rotations, but you cannot rotate on the Z axis (forwards and backwards) purely in CSS, maybe Javascript or jQuery would be able to do so.
For more on CSS rotation try reading up on it here: http://www.w3schools.com/css/css3_3dtransforms.asp
I would play around with something like CAMANJS or just create a second background image that tilts your existing image and use that on the hover event.
My issue is that during CSS transition border-radius temporarily stops clipping elements inside if transition of overlapping element involves transform. In my case I have two divs absolutely positioned one above the other where the first one has transition triggered by action on clicking a navigation element inside the second one, like:
<div id="below"></div>
<div id="above"><div id="nav"></div></div>
The above div has border-radius: 50% and clips the nav div. In CSS it goes like (minimal example, original onclick action illustrated as :hover):
#below {
position: absolute; width: 250px; height: 250px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#below:hover {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#above {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
overflow: hidden;
}
#nav {
width: 40px;
height: 200px;
background-color: rgba(0,0,0,0.3);
}
Of course it is better visible in http://jsfiddle.net/UhAVG/ with some additional styling for better illustration.
This works as expected in IE10+ and FF25, also in Chrome 31 and 32 with hardware acceleration disabled. In result only accelerated Chrome shows this unwanted behaviour. So I'm wondering if it's possible to workaround it somehow using current CSS3 techniques.
After some more experiments I've finally found the solution. Sometimes simple ones are the hardest to find. In this case #above {z-index: 1;} (like in http://jsfiddle.net/UhAVG/1/) solves the issue. Wild guess is that z-index prevents some optimization that combines operations from single layer and doing so mistakenly optimizes out applying border-radius on element. With layers separated this is no longer the case.