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.
Related
okey, simple css flip
.container
.flipper.A
.front
.back
.flipper.B
.front
.back
it's important for me, that .front and .back both have negative top and left absolute position
and .flipper dimensions is 0x0
when flipper A is rotatedY 180deg, so .back is visible, it incorrectly interacts with other .flippers if their positions intersect. For example, i click on links in flipper B, but can't click on links in flipper A, if A is over B
working example is here http://jsfiddle.net/attenzione/g2at2/ - you almost can click on test 1, instead click on test 3
such situation only appear on webkit browser
any help with it? is this webkit bug?
Just bring the div that you want to be in front towards the front (in 3d space)
CSS
div.flipped {
-webkit-transform: rotateY(180deg) translateZ(-1px);
z-index: 2;
}
the translateZ moves it towards you
corrected fiddle
Is there a reason why your inner .block has absolute positioning? This is what is causing the issue. If you must use absolute positioning on the inner block then there are two ways round this.
You could overflow hidden the outer element (.flipper)
Or you could add pointer-events:none on the unflipped element, bear in mind this only works back to IE9
You should really try not to use absolute positioning though as it isn't needed.
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.
I have div with CSS rotateX transform applied to it:
-webkit-transform: perspective(500px) rotateX(60deg) rotateY(60deg) ;
and a bunch of smaller div's floated in it, with :hover rule applied to them.
The problem is that only half of inner divs react to :hover event.
JsFiddle: http://jsfiddle.net/fNxgn/4/
if you remove in css height: 200px all block will react hover event
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/
The following example shows a div inside a div. The inner div is
position: fixed;
When I add
transform: translate(0px, 0px);
to the outer div, the inner div will no longer behave as fixed
Link to the example: http://dabblet.com/gist/1723937
So, does translate actually change the viewport? Can anyone help me to keep the inner div fixed using css, when the outer div has a translate style?
Thank you,
Felix
Here is an article on it:
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
Hope you find it helps.