I have this CSS:
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
that flips and image upside down.
All I want is the image to stop when has flipped 90° and so it's invisible.
Is that possible in any way?
If your need is to flip and image by 90 degrees such that it becomes invisible then you should look at using rotate(90deg) transforms (rotateX(90deg) in this case) like in the below snippet.
I am not sure on when you would be making the element become invisible (like :hover, click etc) but if you make it invisible on :hover then put the :hover selector on a container element instead of the image itself. This is because once the image is hovered and becomes invisible due to rotation then the mouse pointer is technically no longer over the image (in other words, hover is no longer applicable). This would mean that the image immediately reverts back to original state automatically.
div {
border: 1px solid #777;
height: 100px;
width: 200px;
}
img {
transition: all 1s;
}
div:hover img {
transform: rotateX(90deg);
}
<div>
<img src="http://lorempixel.com/200/100/nature/1" />
</div>
On the other hand if you are insistent on using scaleY() transform to achieve this effect, then you would have to use scaleY(0) in-order to make the element invisible. scaleY(-1) will always end up at -180deg and there is no way to stop this in the middle.
div {
border: 1px solid #777;
height: 100px;
width: 200px;
}
img {
transition: all 1s;
}
div:hover img {
transform: scaleY(0);
}
<div>
<img src="http://lorempixel.com/200/100/nature/1" />
</div>
http://davidwalsh.name/demo/css-flip.php
Take a look at this demo from great David Walsh :)
I think for you the vertical flip is more interesting
Just change the .front and .back # :hover to 90deg and you get the result you want!
Related
I have a flip animation were I use perspective, I have a simple card that flips when hovered. From my understanding the perspective property and the transform property perspective() are the same except perspective is applied to the parent and is rendered on its children and the perspective() is applied directly to an element you want to have perspective, is this correct? I used the perspective property at first then realized I could simplify my code slightly by using perspective() so I changed it. With perspective() if you hover over the card the animation works but if you move the mouse off and back on before the animation finishes at the very beginning of the animation you get some weird results, the back of the card will show through the front and the card will stretch across the screen, all this weird behavior stops when I give the card a parent with a perspective property and delete the perspective(), so is this a browser error or am I not understanding the differences correctly or is there some other property I need to use with perspective() that I'm not aware off?
two versions of css with results
perspective: 1000px;
https://fiddle.jshell.net/rqzwoguw/28/
transform: perspective(1000px);
https://fiddle.jshell.net/rqzwoguw/29/ // move mouse on and off at the beginning or the middle point of the transition.
Keep the pespective constant, don't change it on hover.
Just add to .card: (no rotation, but the same pespective that you are setting on hover)
transform: perspective(1000px) rotateY(0deg);
.front,
.back,
.card {
width: 100px;
height: 170px;
border-radius: 10px;
text-align: center;
}
.card {
position: relative;
transition: transform 1s ease-in-out 0s;
transform-style: preserve-3d;
transform-origin: right;
transform: perspective(1000px) rotateY(0deg);
}
.card:hover {
transform: perspective(1000px) rotateY(180deg);
}
.front {
background-color: red;
}
.back {
background-color: blue;
transform: rotateY(180deg);
position: absolute;
top: 0px;
z-index: -1;
}
<div class="card">
<div class="front">
FRONT
</div>
<div class="back">
BACK
</div>
</div>
I'm struggling with the following situation: I have an element which has a clip path to mask it's content. This is later used for an animation, revealing the content. However, there's another element inside which has an animation of it's own, which is not being masked due to the animation.
Have a look here: https://jsfiddle.net/wne2z1m4/
So basically: -webkit-clip-path:inset(-10% 50% 98% 50%); and animation:animation 1s linear 0s infinite; don't seem to be working well together. If you disable the animation on the button element, you can see it will be masked by the container.
Does anyone know if there's a way to keep the button element animating, but also have it masked?
Thanks!
Just add
overflow: hidden;
In the example below I've made some additional changes to make example more clear, but you don't need them. Just add overflow to element with clip-path.
.foo {
outline: 1px dotted red;
}
.bar {
padding:30px;
background: silver;
-webkit-clip-path: inset(1em 1em 1em 2em);
clip-path: inset(1em 1em 1em 2em);
overflow: hidden;
}
.button {
display:inline-block;
background:red;
animation: animation 1s linear 0s infinite;
}
#keyframes animation {
0% { transform: translateY(50px); }
50% { transform: translateY(0); }
100% { transform: translateY(50px); }
}
<div class="foo">
<div class="bar">
<div class="button">
Test
</div>
</div>
</div>
I have a problem in latest Firefox browser version 34 (system: Windows 7, screen width: 1600px). I made effect with zooming images (in some container) after hover on it. I am using transform: scale(1.1) with transition: transform 0.3s ease-in-out. But when I hover on image, and after image zoom in.. it make some strange 1px-shifting. Some rendering browser bug, but I hope that existing some fix for it.
Most important CSS definition and part of HTML code:
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7">
</figure>
Sample with bug is online here: http://templates.silversite.pl/test/jumpingimg/
I saw also that somebody can fix it, but I do not know how, e.g. box "Our recent work" on http://demo.qodeinteractive.com/bridge/
I had a similar problem on my project. All images were position: absolute; and the transform look like that:
figure img{
transform: translate( -50%, 50%) scale(1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale(1.1);
}
I replace every scale with scale3d and that solved my problem.
The final styles look like that:
figure img{
transform: translate( -50%, 50%) scale3d(1, 1, 1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale3d(1.1, 1.1, 1);
}
Hope that's will fix your problem
On the link that you provided, http://demo.qodeinteractive.com/bridge/ , if you actually go here: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/ , you can see that, once looking at dev tools, that they apply a margin of "1px" on left/right side
.projects_holder.hover_text.no_space article .image img {
margin: 0 1px;
}
If you disable that style, you'll see the image move as you're describing when hovering on the image.
Therefore, your CSS for the image should be:
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
display: block; /* (or inline-block) */
margin: 0 1px;
}
I have just run into this same problem now. The solutions here didn't fix the issue, so I'm posting what I did to get this to work.
Like OP I had a container with oveflow hidden and was the same size as the image inside it. The image would scale on hover to create a 'zoom' effect - but when initially starting and ending the transition, the image was "jumping"/growing a tiny bit on the bottom and right-hand side. This made it jumpy and not smooth.
I had calculated the dimensions of my components based off of percentages, which caused them to be non-integers (Chrome). I have a feeling Scale & Scale3d round the pixel values when scaling, which caused this jump. I gave a parent container display:table, which caused all children to have their width/heights be rounded to be an integer value. This fixed the issue for me, and the images now scale smoothly!
7,5 years later it's still an issue and the now solution is will-change css property. Only IE won't get this, but others seems to be doing fine - no more px jumping (edit: on non retina screens).
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
will-change: transform;
}
I just run over the same issue and for me it looks like that the browser corrects the decimal pixel after the scaling is done. Or some how the height and the width doesn't get scaled equals and that gets corrected in the end.
So I think the solution is to use an image with a 1 x 1 ration factor.
So for me the code of the question works fine when I use a the lorempixel with a width and height of 400px.
Let me know if that solves the issue?!
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/400/400/fashion/7">
</figure>
I would like to rotate a full-width div (from side to side without free space) in which will be some content.
I want the corners on the right side to touch the right side of the page and the corners on the left side to touch the left side of the page. I don't think width:200% and overflow-x:hidden is the best solution.
How can I achieve this?
Here is an example. Note that the corners don't touch the sides of the page.
.rotated {
width: 100%;
height: 100px;
background-color: red;
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
<div class="rotated"></div>
You might find the CSS transform skewY() helpful. It will skew the element without rotating the corners.
I've also set the transform-origin to the top right so that the element doesn't skew off the top of the page.
html,body {
margin: 0;
}
.rotated {
height: 100px;
background-color: red;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
transform: skewY(-6deg);
}
<div class="rotated"></div>
For further reference, see the Skewing and Translating example at MDN.
You could increase the horizontal proportion with scale, but the content will be scaled as well (as long as you know it you can compensate)
.rotated {
width: 100%;
height: 100px;
background-color: red;
transform: scale(1.2 , 1) rotate(-6deg);
}
<div class="rotated"></div>
I want to rotate the image which is placed in the button of scrollbar in Chrome. Now I have a CSS with this content:
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(images/arrowup.png);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
background-repeat: no-repeat;
background-position: center;
background-color: #ECEEEF;
border-color: #999;
}
I wish to rotate the image without rotating its content.
Very well done and answered here – http://www.sitepoint.com/css3-transform-background-image/
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
transform: rotate(30deg);
}
Very easy method, you rotate one way, and the contents the other. Requires a square though
#element{
background : url('someImage.jpg');
}
#element:hover{
transform: rotate(-30deg);
}
#element:hover >*{
transform: rotate(30deg);
}
Update 2020, May:
Setting position: absolute and then transform: rotate(45deg) will provide a background:
div {
height: 200px;
width: 200px;
outline: 2px dashed slateBlue;
overflow: hidden;
}
div img {
position: absolute;
transform: rotate(45deg);
z-index: -1;
top: 40px;
left: 40px;
}
<div>
<img src="https://placekitten.com/120/120" />
<h1>Hello World!</h1>
</div>
Original Answer:
In my case, the image size is not so large that I cannot have a rotated copy of it. So, the image has been rotated with photoshop. An alternative to photoshop for rotating images is online tool too for rotating images. Once rotated, I'm working with the rotated-image in the background property.
div.with-background {
background-image: url(/img/rotated-image.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
}
Good Luck...
CSS:
.reverse {
transform: rotate(180deg);
}
.rotate {
animation-duration: .5s;
animation-iteration-count: 1;
animation-name: yoyo;
animation-timing-function: linear;
}
#keyframes yoyo {
from { transform: rotate( 0deg); }
to { transform: rotate(360deg); }
}
Javascript:
$(buttonElement).click(function () {
$(".arrow").toggleClass("reverse")
return false
})
$(buttonElement).hover(function () {
$(".arrow").addClass("rotate")
}, function() {
$(".arrow").removeClass("rotate")
})
PS: I've found this somewhere else but don't remember the source
I was looking to do this also. I have a large tile (literally an image of a tile) image which I'd like to rotate by just roughly 15 degrees and have repeated. You can imagine the size of an image which would repeat seamlessly, rendering the 'image editing program' answer useless.
My solution was give the un-rotated (just one copy :) tile image to psuedo :before element - oversize it - repeat it - set the container overflow to hidden - and rotate the generated :before element using css3 transforms. Bosh!
try making a div for the image only and then flipping it with transform: scaleY(-1); or transform: scaleX(-1);
if you want to have the navbar in front of the image you can make an overlapping div and set its opacity property to 0;
I tried all solutions but none helped, below is what was my problem and how I solved it:
Problem: we have an image for desktops with landscape orientation but To show the same image but rotated (portrait) for mobile screens.
How: I just rotated the actual image in my assets folder the way I wanted (portrait), and then just used media queries to call that image for my background for mobiles, and that's it.
(this was the easiest and quick solution I did.)
Update Dec 2021
Since the original question is
"..rotate the background image .."
The best answer looks to be here
https://stackoverflow.com/a/62135576/3446280