I have a div I'm applying a transform to with CSS. The actual transformation is as follows:
.trans{
transform-origin: right center;
transform: perspective( 600px ) rotateY( -30deg) translateZ(1px);
-webkit-transform-origin: right center;
-webkit-transform: perspective( 600px ) rotateY( -30deg) translateZ(150px);
}
The problem as far as I've been able to find out is that this rotates the div 'behind' the page in depth. It shows up correctly, but doesn't seem to interact with the mouse correctly. So my CSS class for the hover state doesn't work at all on these elements.
You can check out the reduced testcase. In the result pane, note that the square on the left does not change background colors correctly but the square on the right does. This bug happens on Chrome, but not on Firefox or IE when I tested.
Any good ideas on how to fix this?
You have to declare a display property for .trans class for it to work. Thats it.
Here is the Working Solution.
The HTML:
<div class="square trans">
<p>Text Here!</p>
</div>
<div class="square">
<p>Text Here!</p>
</div>
The CSS:
.square{
background-color: #ffffff;
border-radius: 4px;
border-color: #222222;
border width: 6px;
border-style: dotted;
display:inline-block;
float:left;
}
.trans{
transform-origin: right center;
transform: perspective( 600px ) rotateY( -30deg);
-webkit-transform-origin: right center;
-webkit-transform: perspective( 600px ) rotateY( -30deg);
display:table-cell;
}
/* Doesn't work on transformed square! */
.square:hover{
background-color: #ff0000;
}
Hope this helps.
Related
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!
Why when I use position absolute and percentage width I have this glitch when I hover on div above?
There is example. I have this glitch on little more complicated site.
<div class="box"> text </div>
<div class="container">
<div>
.box {
width: 50%;
height: 50%;
background: red;
}
.box:hover {
transition: 0.5s;
-webkit-transform: translate(0, 6px);
}
.container {
position:absolute;
top:40px;
width:40%;
height:50px;
float:left;
background: blue;
color:white;
}
http://jsfiddle.net/TsUEH/
When you hover on red text then width of blue div are shaking.
How can i avoid this without removing percentage and position absolute?
It works fine for me, but if you find an element "shaking" (esp in Chrome), it's likely because of the translate function not working with the z-index correctly
If you need to fix it, you can use this code (lifesaver):
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
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 would like to rotate an image by 90 degrees with CSS only.
I can do the rotation, but then the position of the image is not what it should be. First, it will overlay some other elements in the same <div>. Second, its vertical dimension will become bigger than the containing <div>.
Here is my code where the two classes are defined:
.imagetest img {
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
width: 100%;
}
.photo {
width: 95%;
padding: 0 15px;
margin: 0 0 10px 0;
float: left;
background: #828DAD;
}
<article>
<section class="photo">
<div>Title</div>
<div class="imagetest">
<img src="https://picsum.photos/200/100"/>
</div>
</section>
</article>
Is there a way of keeping the image within the section? I can translate and scale the image so that it is within the section, but that works only, if I know the image size beforehand. I would like to have a reliable method that does not depend on the size.
The trouble looks like the image isn't square and the browser adjusts as such.
After rotation ensure the dimensions are retained by changing the image margin.
.imagetest img {
transform: rotate(270deg);
...
margin: 10px 0px;
}
The amount will depend on the difference in height x width of the image.
You may also need to add display:inline-block; or display:block to get it to recognize the margin parameter.
Give the parent a style of overflow: hidden. If it is overlapping sibling elements, you will have to put it inside of a container with a fixed height/width and give that a style of overflow: hidden.
I know this topic is old, but there are no correct answers.
rotation transform rotates the element from its center, so, a wider element will rotate this way:
Applying overflow: hidden hides the longest dimension as you can see here:
img{
border: 1px solid #000;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.imagetest{
overflow: hidden
}
<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" width=100%/>
</div>
</section>
</article>
So, what I do is some calculations, in my example the picture is 455px width and 111px height and we have to add some margins based on these dimensions:
left margin: (width - height)/2
top margin: (height - width)/2
in CSS:
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
Result:
img{
border: 1px solid #000;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
/* 455 * 111 */
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
}
<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" />
</div>
</section>
</article>
I hope it helps someone!
Perform rotation using transform: rotate(xdeg) and also apply overflow: hidden to the parent component to avoid overlapping effect
.div-parent {
overflow: hidden
}
.div-child {
transform: rotate(270deg);
}
I have made a fiddle:
http://jsfiddle.net/89x4d/
I'm trying to maintain the skewed div but keep the p text straight.
Is this possible?
Thanks
You should use 20deg instead of 0deg on P to compensate for the DIV transform (since the result is the composition of transforms.)
In order to cancel the effect of the skew, you have to give positive value of transformation.
p {
-webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
transform: skew(20deg) !important;
}
Demo
div {
width: 200px;
height:50px;
background: red;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
margin: 20px;
padding:0 25px;
}
p {
-webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
transform: skew(20deg) !important;
}
<div>
<p>hey i'm straight, ok?</p>
</div>
hey i'm straight, ok?
I'm not sure if you can get it to skew back, seems to distort the font too much.
skew(20) is the closest i could get, but instead you could setup 2 divs, 1 for a skew box and another to then move over it.
http://jsfiddle.net/gP9ne/3/
Setup a fiddle there for you to see
Martyn
edit: actually doesnt look any different :p i think its just the black on red with the font doesnt like my screen :p
always over thinking!
As others have pointed out, reversing the skew of the <p> can lead to some undesirable results.
It's also not super reusable in that for every new skew angle you would need a corresponding CSS selector/declaration to reverse the internal content.
As an alternative, use the :before selector to add the skewed element behind the text.
HTML
<div>
<p>hey i'm straight, ok?</p>
</div>
CSS
div {
width: 200px;
height:50px;
margin: 20px;
position:relative;
}
div:before {
content: "";
display:block;
background: red;
position:absolute;
width:100%;
height:100%;
z-index:-1;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}
And a demo.