I have a practical use for the CSS3 skewX property. I have written a simple image accordian-like script with jQuery. Images are skewed (already, not in CSS) as part of the design and in order to make the correct areas clickable, the containing divs need to be skewed.
The problem is that in skewing the div, the image is skewed aswell. Skewing a skewed image does not look good.
One solution I've tried is resetting the skewX value to 0deg on the image, but to no avail. In the fiddle, I haven't included the accordian as this isn't necessary to the solution.
http://jsfiddle.net/yM49N/2/
<div><img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"></div>
div {
-webkit-transform:skewX(200deg);
-moz-transform:skewX(200deg);
-o-transform:skewX(200deg);
-ms-transform:skewX(200deg);
transform:skewX(200deg);
border:1px solid red;
}
You can apply an inverted skewX on img:
img {
-webkit-transform: skewX(-200deg);
-moz-transform: skewX(-200deg);
-o-transform: skewX(-200deg);
-ms-transform: skewX(-200deg);
transform: skewX(-200deg);
}
To make the div contain the image properly, you also need to add overflow: hidden.
http://jsfiddle.net/thirtydot/yM49N/3/
Related
My example is in this JSfiddle link:
https://jsfiddle.net/k9x4wmxk/3/
In Chrome browser, the hover CSS style (Line 71 in JSFiddle),
.photobox:hover img {width: 105%;}
present exactly what I want. The image width expands when hover.
However in Firefox browser, the above CSS style change the image height, not the width.
Does anyone know the problem? How can I fix it? Thanks a lot!
try this code image hover
.photobox:hover img { -moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);}
I want to create this triangle in CSS.
http://acceptatie.foursites.nl/foursites/vierkant.jpg
But it must be a fluid triangle. How can i make this I try with skewY. But than the triangle is broken at the to of the element.
Thank you for helping me!
Instead of using borders to make the triangle you can use transform to rotate a div and just hide the overflow of the parent element.
If use transform instead of borders you can have box shadow on the div to :)
Tranform code for rotating a div
-webkit-transform: rotate(357deg);
-moz-transform: rotate(357deg);
-ms-transform: rotate(357deg);
-o-transform: rotate(357deg);
and as i said just hide the overflow on the parent element, in your case the body tag
overflow: hidden;
But here is an example on jsfiddle
Hope you can use it.
Inspired by Design Shack, I wanted to have some linkable photos zoom in slightly when hovered over. However, I want the animations to be centered, so it's like we're zooming in slightly.
In order to keep the image centered, I fiddled with top, left, margin-top, and margin-left to make it work. I'm not even sure how it works :-) but it works...
...except that the animation is actually kind of choppy and jumpy, at least in Safari - worst of all in Safari on 10.9. (Firefox and Chrome do a better job though.)
Check out the example here:
http://jsfiddle.net/MnHVk/1/
The salient piece:
.card img:hover {
height:110%;
width:110%;
top:10%;
left:-10%;
margin-top:-10%;
margin-left:5%;
}
Compare the jumpy animation to the version that doesn't try to center, here:
http://jsfiddle.net/MnHVk/2/
Can anybody think of any other way to do this hover animation that won't result in such a jumpy effect? Perhaps there's some other technique for adjusting the positioning so that when the image is hovered over, it moves smoothly?
If you use transform, it should render thru the GPU, and I think, smoothly
.card img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
transform-origin:50% 50%;
}
updated demo
I have an issue that is occurring in Chrome in a theme I created, when I hover over an image the font icons on the page are moving around. I've looked around for a solution but I can't find anyone mentioning this. Take a look at the demo here and hover your mouse over the image in the second blog post.
This is the css rule for the hover event:
.entry-image a:hover img {
-webkit-transform: scale(1.06);
-moz-transform: scale(1.06);
-ms-transform: scale(1.06);
-o-transform: scale(1.06);
transform: scale(1.06);
}
Thanks in advance,
Ivar Rafn
I'm guessing you had a margin or position set with ems or rems. When an em or rem size resolves to a pixel value with decimal points (e.g., 17.100295px), hovers on nearby elements in Webkit and Blink can cause a little twitch.
I fixed it.
I just had to add a css rule for the :before pseudo-element to have margin:0 and display:inline and that took care of the problem.
Any one can help me to do double height text and double width text in font style(as like in dot matrix printers) in css without using any images.
Any code other than this?
heading{
font-weight:bold;
width:200%;
}
What I expect is as below.
Thanks.
OP,
Updated fiddle that includes all vendor prefixes for transform and transform-origin:http://jsfiddle.net/LTaAy/1/
See this fiddle: http://jsfiddle.net/LTaAy/
IMG
HTML
<p class="doubleWidth">DOUBLE WIDTH</p>
<p class="doubleHeight">Double Height</p>
<p class="doubleWidthandHeight">Double Width and Height</p>
CSS
p {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
}
p.doubleWidth {
-webkit-transform: scaleX(2);
-moz-transform: scaleX(2);
}
p.doubleHeight {
-webkit-transform: scaleY(2);
-moz-transform: scaleY(2);
}
p.doubleWidthandHeight {
-webkit-transform: scaleX(2) scaleY(2);
-moz-transform: scaleX(2) scaleY(2);
}
I only included 2 vendors prefixes, but they should be applied as necessary.
- Only true above, This fiddle http://jsfiddle.net/LTaAy/1/ has been updated.
Hope it helps.
CSS transform:scale
Check out transform scale, that should do the trick:
http://www.css3files.com/transform/
-webkit-transform:scale(2,1);
-moz-transform:scale(2,1);
-ms-transform:scale(2,1);
-o-transform:scale(2,1);
transform:scale(2,1);
letteringjs.com can be used to apply this CSS to each letter independently through automatic span injection as you might have an issue with layout if the whole span is text span is stretched.
Additionally, you might be able to get away with width: 50%; on your double width text to restrain it within your layout.
Create your own font
Otherwise edit the font yourself. Use a tool like Font Creator. Just manipulate the scale, and save 2 new fonts, one with 200% width, and one with 200% height. Throw them into Font Squirrel and reference all 3 as unique #font-face font-families.