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 do I get my textboxes to align properly once triggered? - jQuery/CSS

    How to change buttons to pictures in jquery dialog

    How is the signed out blur effect achieved on icloud.com?

    How to style radcombobox item so that words that wrap are separated

    How to hide class=“” CSS

    How to create new lines with less space HTML/CSS

    How to make a CSS mega menu be on the full width of the page? (998px, but in the middle?)

    How to make a pie chart in CSS

    showing element out of scroll area

    How do I add an attribute to a specific CSS class?

    Dropdown container not showing right padding

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How to get floated divs align to the top?

    How do I customize the rdoc Darkfish stylesheet?

    How to create directional two pointed arrow using css?

    How to make an overflow hidden only for box-shadow

    Main navigation, classes on/off. HGelp understanding how this is built

    how to easily develop print css?

    simplest slideshow using html, css toggling visibility of each div tag

    CSS sliding-window rounded-corner buttons: how to avoid the “dead” area on right side of “window”?

    CSS: how do I add Twitter Bootstrap to an existing web page with it's own CSS?

    How can I get as much of the text into a DIV row as possible?

    How to get dropdown menus to align with the correct menu tab

    how i can show the image in middle of div i want using CSS

    How to apply CSS color on parent element using a color picker?

    How to rotate a chart 90 degrees including the text values?

    howto create the iPhone Contacts header scroll Effect for html?

    How can you print a page that has been altered by javascript?

    how to bind newly created html element to its css

    how to animate a css grandient change with jquery