Prevent Children from Inheriting Transformation CSS3

Prevent children from inheriting rotate transformation in CSS

I believe that you are going to need to fake it using a second child, the specification does not seem to allow for the behavior you would like, and I can understand why the position of a child element has to be affected by a transform to its parent.

This isn't the most elegant of solutions, but I think you're trying to do something that the specification is never going to allow. Take a look at the following fiddle for my solution:

.parent {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 70px;
}

.child1 {
  background-color: yellow;
  width: 200px;
  height: 150px;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.child2 {
  position: absolute;
  top: 30px;
  left: 50px;
  background-color: green;
  width: 70px;
  height: 50px;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

CSS - preventing child element inheriting cancelling out transform property of parent element

Can you add the :hover to the card instead?

.card:hover > img {
  transform: scale(1.03);
  filter: brightness(80%);
}

How to apply transform only in the parent element?

Child elements will always get affected by transform on the parent element. This is not something that a child inherits and hence it cannot be over-ridden by using transform: ' ' or transform: none on the child. One way to counter it would be to apply the reverse transform on the child. Here, since the scale shouldn't affect the child, the inverse of the parent's scale should be applied to it.

The scaleX on parent is 0.972 and so the scaleX on child should be 1/0.972 (inverse) which is 1.028. Similarly for scaleY it shouldbe 1/0.401 which is 2.493.

#mydiv,#mydiv2 {  height: 200px;  width: 200px;  background: red;  transform: translate(27px, 23px) scale(0.972, 0.401);}
#mydiv .player_controls {  transform: scale(1.028, 2.493);  transform-origin: left top;}

<h2>With reverse transform on child</h2><div id="mydiv">  <div class="player_controls">    <a class="right carousel-control" href="#" data-slide="next"><span class="glyphicon glyphicon-chevron-right">Some icon</span>Some text</a>   </div></div><h2>With no reverse transform on child</h2><div id="mydiv2">  <div class="player_controls">    <a class="right carousel-control" href="#" data-slide="next"><span class="glyphicon glyphicon-chevron-right">Some icon</span>Some text</a>   </div></div>

Avoid 3D transform of Child element

JSFiddle

First, use transform-style: preserve-3d to allow the parent's 3D transformations to carry over to the child's:

.parent {
    transform: rotateX(70deg) rotateZ(-35deg);
    transform-style: preserve-3d;
}

Now, perform the reverse transformation on the child using the center bottom as the anchor point.

.child {
    transform: rotateZ(35deg) rotateX(-70deg);
    transform-origin: center bottom;
}

Be sure the dimensions of the image container matches the image's, or the origin will be inaccurate.

CSS - Remove rotateX for child elements

Here you go. I suspect the issue was that the span elements weren't set to display:inline-block as transforms to do not affect inline elements.

I also had to set a height on the spans equal to that of the anchors but that seems a minor issue.

.nav-tabs li a {  -webkit-transform: perspective(100px) rotateX(30deg);  -moz-transform: perspective(100px) rotateX(30deg);  height: 32px;  background: #fff;  border-radius: 4px;  border: 1px solid #ccc;  margin: 0 10px 0;  box-shadow: 0 0 2px #fff inset;  transform-style: preserve-3d;  color: red;}.nav-tabs li a span {  -webkit-transform: rotateX(-30deg);  -moz-transform: rotateX(-30deg);  display: inline-block;  height: 32px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><ul class="nav nav-tabs" role="tablist">
  <li role="presentation">    <a href="#home" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-envelope-o" aria-hidden="true"></i>       Some text</span></a>  </li>  <li role="presentation" class="active">    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span><i class="fa fa-search" aria-hidden="true"></i>       Some Text</span></a>  </li>  <li role="presentation">    <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><span><i class="fa fa-comment" aria-hidden="true"></i>Some Text</span></a>  </li></ul>