how to prevent transformation of text inherited from a skewed parent


Tags: html,css,transformation

Problem :

Hie,i am trying to prevent the text inside a link from skewing together with the parent. here is how it looks

.one {
	width:300px;
	height:250px;
	list-style:none;
	color:#FFF;
}
.one li {
	
	width: 115px;
   height: 100px;
  
  text-align:center;
 
   
 
   display: inline-block;
  -moz-transform: translate(0px, -1px) skew(0deg, -5deg);
-webkit-transform: translate(0px, -1px) skew(0deg, -5deg);
-o-transform: translate(0px, -1px) skew(0deg, -5deg);
-ms-transform: translate(0px, -1px) skew(0deg, -5deg);
transform: translate(0px, -1px) skew(0deg, -5deg);
	background-color:rgba(239,82,85,1.00);
}
.one li a {


-moz-transform: translate(0px, 1px) skew(0deg, 5deg);
-webkit-transform: translate(0px, 1px) skew(0deg, 5deg);
-o-transform: translate(0px, 1px) skew(0deg, 5deg);
-ms-transform: translate(0px, 1px) skew(0deg, 5deg);
transform: translate(0px, 1px) skew(0deg, 5deg);
		
	
}
<div class="one">
<ul>



<li>

<a href="#">this is the test</a>


</li>
<li>

<a href="#">this is the test</a>


</li>


</ul>

</div>

I have read these articles from here with similar problem but seems mine is a bit different. Slant the top of a div using css without skewing text and Reset angle of text in skewed div using CSS. Please help me with the css



Solution :

CSS transforms don't work on inline elements in Webkit browsers (Safari and Chrome). Only "block" and "inline-block" elements can be transformed. (It's sort of like a bug, see https://bugs.webkit.org/show_bug.cgi?id=58965 )

As a workaround, you can add this:

.one li a { display:inline-block; }

Another option would be to add a wrapper div around the anchor element, and apply the transform on that.


    CSS Howto..

    How to create a single space in css between a sentence and a photo on my wordpress site?

    How to set jquery ui icon as background image per css?

    How to get CSS background images to show up in HTML files opened by Word?

    How to highlight a whole cell when hovering over link

    How do you spin side to side using css3 animation?

    how to put 6 divs in the same line?

    How to set a box on bottom of a box?

    How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

    How is struts finding css files?

    How to edit .css file from html via jquery

    style a navigation link when a particular div is shown

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How can I change the color of a DecoratorPanel in GWT?

    How to use a variable for a path with Stylus?

    How to avoid line breaks after “:before” in CSS

    How to achive certain overlapping layout when there is not enough space in parent container?

    How to add class CSS after ng-click to parent element?

    Block grid shows horizontal scroll bar in Foundation

    How do I get the tooltip background to extend or grow as I input more text?

    how to apply css in angular.js

    How do I center and auto-resize this css loader?

    How can I set a html web page adapt to only a tablet size or large screen in css? [closed]

    This should be simple but want to do it right. CSS display:none; how to turn back on according to @media

    How to get a white outline around an image in CSS

    How can we customize vs2010 css editor template?

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    How to get rid of space and align two objects in one line in css/html?

    How can I force a dynamic
      to be 100% the height of it's parent, no more, no less?

    How can I track down a:hover jquery source?

    How can I click a specific li without an id or class?