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..

    CSS Flexbox: How do you align child elements of a flexbox container to opposite far ends of the main axis?

    How to sprite body background in CSS

    How do I lock a sidebar to the height of a window even when a user scrolls?

    How to override HTML with CSS

    How to find unused CSS from rails? deadweight not working [closed]

    How to extend the background of a CSS-arrow to the whole page width?

    How to use CSS import in Liferay? CSS fast load works bad

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    How to set background image for body tag using css?

    How to emulate iOS style dropdown menus with html, css, javascript/jquery?

    How to prevent a p:menubar from being overlapped by the contents of a CSS template?

    Gulp callback - How to tell Gulp to run a task first before another?

    CSS - how to make the end of the word blurry?

    How do I apply css animations to angular2 components before they are destroyed/removed?

    How to pass a css % parameter in javascript/jquery

    How to fix the Height for this area?

    How do I put an image on top of an image without using absolute positioning?

    How to target flex item by its order number?

    How to replicate this CSS sibling selector in jQuery?

    How do I make images interactive?

    How to define the css :hover state in a jQuery selector?

    Achieved JS typewriter effect, can't figure out how to make it loop after last array item

    How to target all elements, except last one with css?

    How to loop animated text banners using css keyframes

    How to change the Navbar color in Yii2

    How to switch fixed elements when scrolling down the page

    How to disable a CSS class with javascript on window.load()

    How to blend canvas to background with CSS?

    How to disable webkit-text-size-adjust with JavaScript

    JavaFX How to change color of dialog/window title?