Oi,
https://jsfiddle.net/jbwq6y87/7/
#box {
width: 500px;
height: 500px;
transition: 0.5s;
overflow: hidden;
}
#box:hover{
transform: scale(0.9);
}
#pic{
width: 100%;
height: 100%;
background: url (http://via.placeholder.com/500x500);
background-size: cover;
transition: 0.5s;
}
#pic:hover{
transform: scale(1.2);
}
I figured out everything for my wanted effect, but I noticed that the parent div has a light 1px stutter going on when it's ending its transform: scale(0.9);.
I know that the scaling of the child has something to do with it, but I don't exactly know what's causing the stutter. I'd appreciate some help to fix this very minor problem.
Having a quicker transition duration for the child container than the parent container should solve this issue. This could be something like the following:
#box {
width: 500px;
height: 500px;
transition: 0.5s ;
overflow: hidden;
}
#box:hover{
transform: scale(0.9);
}
#pic{
width: 100%;
height: 100%;
background: url(http://via.placeholder.com/500x500);
background-size: cover;
transition: 0.2s;
}
#pic:hover{
transform: scale(1.2);
}
Related
I'm trying to make it so that the rotate(-45deg) property gets delayed a shortly after the first property translateY(6px) with the help of a delay. But how do I do that?
Code:
transform: translateY(6px) rotate(-45deg);
I first thought it was something like:
transform: translateY(6px) rotate(-45deg, 2s);
There is no trivial way to do this but in your particular case you can split the transformation using two different properties. You keep the rotation within transform and you use top/bottom to add the translation.
.box {
margin: 20px;
position: relative;
width: 200px;
height: 200px;
background: red;
top: 0;
transition: transform 0.5s, top 0.5s 0.5s;
}
.box:hover {
transform: rotate(-45deg);
top: -50px;
}
<div class="box">
</div>
Or you can consider animation:
.box {
margin: 20px;
position: relative;
width: 200px;
height: 200px;
background: red;
top: 0;
}
.box:hover {
animation:change 1s linear forwards
}
#keyframes change {
50% {
transform: rotate(-45deg);
}
100% {
transform: translateY(-50px) rotate(-45deg);
}
}
<div class="box">
</div>
I tried to create this effect using transitions. It should look like you are opening a box.
There are 2 problems:
The order in which the box closes is same as in which it opens. Is there anyway to close the box in reverse order of its opening so that the box goes back in the same state it was when closed?
The ends of the green and yellow flaps are hidden during transition because of the red and blue flaps, so it doesn't look 3D. Is there a way I can show all flaps in 3D way?
I would prefer if the solution was in pure CSS , no JavaScript please.
#box {
position: relative;
top: 170px;
left: 170px;
width: 300px;
height: 300px;
border: 1px solid black;
perspective: 800px;
}
#flap1, #flap2, #flap3, #flap4 {
position: absolute;
}
#flap1 {
background-color: red;
width: 150px;
height: 300px;
z-index: 1;
transform-origin: 0 0;
transition: transform 1s;
}
#flap2 {
left: 150px;
background-color: blue;
width: 150px;
height: 300px;
z-index: 1;
transform-origin: 100% 0;
transition: transform 1s ease 0.3s;
}
#flap3 {
background-color: green;
width: 300px;
height: 150px;
transform-origin: 0 0;
transition: transform 1s ease 0.6s;
}
#flap4 {
background-color: yellow;
top: 150px;
width: 300px;
height: 150px;
transform-origin: 0 100%;
transition: transform 1s ease 0.9s;
}
#box:hover #flap1{
transform: rotateY(-170deg);
}
#box:hover #flap2{
transform: rotateY(170deg);
}
#box:hover #flap3{
transform: rotateX(170deg);
}
#box:hover #flap4{
transform: rotateX(-170deg);
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box">
<div id="flap1"></div>
<div id="flap2"></div>
<div id="flap3"></div>
<div id="flap4"></div>
</div>
</body>
</html>
For Question 1:
If you give the delay in forward order for the :hover selectors and in the reverse order within default selectors, it will achieve the exact reverse animation.
For Question 2:
The fix and the explanation are as follows:
For part of the transition duration, the green and yellow boxes don't look like they have 3D effect because there are a couple of elements with higher z-index which is being placed above. This prevents the stretched area (due to perspective rotate) from showing up and thus it looks like it's only 2D (while it actually is not). To overcome this, we need to instruct the browsers to preserve the 3D aspect of the transform. This is done using transform-style: preserve-3d.
When we do the above, the flaps will all open with a 3D effect but near the start of the animation and its end, we will see a flicker on the blue flap when the transition actually starts and ends for the blue flap. It seems like this is because the z-index loses effect when 3D transform is used and there is a small amount of time between the losing of the z-index effect and starting of the preserve-3D effect during which the blue flap temporarily goes behind. To address this, the 3D equivalent of z-index: 1 (which is, translateZ(1px)) is added. The translate in Z-axis brings the element closer by 1px to your eye and keeps it above the yellow and green flaps.
Finally, despite all the above, there is a small glitch at the end of hover out animation, where the green flap shows through the blue flap. To overcome this, I had changed the delay timings a bit.
(Contrary to what I originally mentioned, the translateZ(0px) is not required and can be removed.)
#box {
position: relative;
top: 170px;
left: 170px;
width: 300px;
height: 300px;
border: 1px solid black;
perspective: 800px;
transform-style: preserve-3d;
}
#flap1, #flap2, #flap3, #flap4 {
position: absolute;
}
#flap1 {
background-color: red;
width: 150px;
height: 300px;
z-index: 1;
transform: translateZ(1px);
transform-origin: 0 0;
transition: transform 1s 1.5s;
}
#flap2 {
left: 150px;
background-color: blue;
width: 150px;
height: 300px;
z-index: 1;
transform: translateZ(1px);
transform-origin: 100% 0;
transition: transform 1s ease 1s;
}
#flap3 {
background-color: green;
width: 300px;
height: 150px;
transform-origin: 0 0;
transition: transform 1s ease 0.5s;
}
#flap4 {
background-color: yellow;
top: 150px;
width: 300px;
height: 150px;
transform-origin: 0 100%;
transition: transform 1s ease;
}
#box:hover #flap1 {
transform: rotateY(-170deg) translateZ(1px);
transition: transform 1s ease;
}
#box:hover #flap2 {
transform: rotateY(170deg) translateZ(1px);
transition: transform 1s ease 0.5s;
}
#box:hover #flap3 {
transform: rotateX(170deg);
transition: transform 1s ease 1s;
}
#box:hover #flap4 {
transform: rotateX(-170deg);
transition: transform 1s ease 1.5s;
}
<div id="box">
<div id="flap1"></div>
<div id="flap2"></div>
<div id="flap3"></div>
<div id="flap4"></div>
</div>
This is how I want to scale my images, smoothly without any jumps.
My attempt does not work like in the gallery above, the image (red square in my case) jumps, my code:
section {
background-color: rgba(0, 0, 0, 0.701961);
width: 400px;
height: 400px;
}
div {
position: absolute;
top: 120px;
left: 120px;
width: 160px;
height: 160px;
background-color: red;
-webkit-transition: all .2s ease-in-out;
}
div:hover {
-webkit-transform: scale(1.8);
}
<section>
<div></div>
</section>
How to fix this? The red square jumps. Is it possible to scale smoothly with CSS Transition at all like in the gallery in the link at the beginning?
What do you mean by "jumps"? Try this, jumps too?
section {
background-color: rgba(0, 0, 0, 0.701961);
width: 400px;
height: 400px;
}
div {
position: absolute;
top: 120px;
left: 120px;
width: 160px;
height: 160px;
background-color: red;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
div:hover {
-webkit-transform: scale(1.8) rotate(0.01deg);
transform: scale(1.8) rotate(0.01deg);
}
<section>
<div></div>
</section>
Also, you could try the variant with a container for an image (like in the first link of your question).
JSFiddle
.banner {
position: relative;
z-index: 1;
cursor: pointer;
border: 1px solid #dfe2e5;
background: #000;
width: 310px;
height: 150px;
-webkit-transition: border-color 0.1s;
transition: border-color 0.1s;
overflow: hidden;
}
.banner:hover {
border-color: #bdc1c5;
}
.banner__image-container {
overflow: hidden;
height: 100%;
}
.banner__image {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.banner:hover .banner__image {
-webkit-transform: scale(1.15) rotate(0.01deg);
transform: scale(1.15) rotate(0.01deg);
opacity: 0.5;
}
<div class="banner">
<div class="banner__image-container">
<img class="banner__image" src="https://picsum.photos/310/150/?image=1022"/>
</div>
</div>
I sometimes solve strange jumps on transition by adding rotate(0.01deg) on the transform property, like so:
.element:hover {
transform: scale(1.5) rotate(0.01deg);
}
I'm looking to recreate an effect like this with CSS 3D Transforms:
How do I achieve this? Here's what I've got so far
body {
perspective: 400px;
transition: perspective 1s;
}
.grid {
display: flex;
justify-content: center;
align-items: center;
background-image: url("http://i.imgur.com/3ACizko.jpg");
background-size: cover;
height: 400px;
width: 400px;
transform: rotateX(60deg);
margin: 0 auto;
transition: transform 1s;
perspective: 400px;
}
.grid p {
transition: transform 1s;
transform: rotateX(-60deg);
}
<div class="grid">
<p>Hello</p>
</div>
I thought that if I rotated the background surface 60 degrees and rotated the text -60 degrees it would cancel out the effect but apparently not?
Anyway, thanks in advance.
Yes, ther solution to your problem is using transform-style: preserve-3d.
But the problem with this is that IE does not support this property
A way to make it work in IE is to use a pseudo element on the p
.grid {
font-size: 30px;
position: relative;
left: 100px;
top: 200px;
perspective: 200px;
perspective-origin: 0% 50%;
}
.grid:after {
content: "";
position: absolute;
width: 300px;
height: 200px;
top: -100px;
left: -100px;
transform: rotateX(30deg);
background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 47px, black 47px, black 50px),
repeating-linear-gradient(90deg, transparent 0px, transparent 47px, black 47px, black 50px);
}
<p class="grid">Hello</p>
After a bit of research, I am confident to post my own answer.
This effect can be achieved using the transform-style property, and setting it to preserve-3d. This would be set to the parent element (in this case, .grid). I also use transform-origin:bottom to raise the text from inside the grid. Here's the snippet:
body {
perspective: 400px;
transition: perspective 1s;
}
.grid {
display: flex;
justify-content: center;
align-items: center;
background-image: url("http://i.imgur.com/3ACizko.jpg");
background-size: cover;
height: 400px;
width: 400px;
transform: rotateX(60deg);
margin: 0 auto;
transition: transform 1s;
perspective: 400px;
transform-style:preserve-3d;
}
.grid p {
transition: transform 1s;
transform-origin:bottom;
transform: rotateX(-60deg);
}
<div class="grid">
<p>Hello</p>
</div>
i was testing out a logo rotation on the y-axis and i came with the following:
http://jsfiddle.net/MEmnc/
.container {
width: 62px;
height: 91px;
position: relative;
perspective: 400px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#card figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
transform: rotateY( 180deg );
}
#card .flipped {
transform: rotateY( 180deg );
}
For some reason i can't get it to work.
I want this logo to rotate when hovered over it. I used an existing logo but this is purely for testing purposes. It needs to rotate as in http://www.ultranoir.com/en/#!/home/
Also will this work for all browsers or is it better to use jquery?
You can do that without problems with CSS.
However, you have several things going wrong.
The correct CSS is :
.container {
width: 62px;
height: 91px;
position: relative;
perspective: 400px;
margin: 0px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
transition: -webkit-transform 1s;
}
#card figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
margin: 0px;
}
.container:hover #card {
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card .flipped {
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
updated demo
EDITED
There were some problems in the above demo; also I noticed in your video that you wanted an animation and not a transform.
DEMO with animation (webkit)
I didn't saw any rotation on the link you provided.. But my intuition says Try this
HTML
<section class="container">
<div id="card">
<img src='http://www.ultranoir.com/cdn/gene/image/common/logo/logo_un2_neg.png' alt='Title of image'/>
</div>
</section>
CSS
.container {
width: 62px;
height: 91px;
position: relative;
perspective: 400px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#card figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#card img:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(180deg);
transition-duration: 1.5s;
-webkit-transition-duration:1s;
}
I have not changed other classes you made..
I fixed vals answer, by changing the img position to absolute and adding some transform to translate Z axis and removing the backface disabler
img {
position: absolute;
}
img.front {
z-index: 100;
transform: translatez(1px);
}
please see here http://jsfiddle.net/56cy0s4w/