Prevent Children from Inheriting Rotate Transformation in CSS

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>

transform scale/rotate effect in CSS should not affect the child

An alternative solution would be using a pseudo selector (:before) which gets the rotation on :hover.

html {

  background-color: rgba(0, 0, 0, 0.75);

}

.container {

  margin: 10% auto;

  text-align: center;

}

div > span {

  display: inline-block;

}

.horizontal {

  display: inline-block;

  position: relative;

  top: .1em;

  width: 15%;

}

.bubble {

  display: inline-block;

  padding: 1em;

  transition: all 0.3s ease-in-out;

  position: relative;

}

.bubble:before {

  content:'';

  background: url(http://imgh.us/Service_bubble.svg) center no-repeat;

  background-size: contain;

  transition: all 0.3s ease-in-out;

  height: 100%;

  width: 100%;

  position: absolute;

  top: 0; left: 0;

}

.bubble:hover {

  transform: scale(1.5);

  margin: 0 10px;

}

.bubble:hover::before {

  transform: rotate(-90deg);

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">

  <div class="bubble">

    <span class="fa fa-inverse fa-google fa-fw fa-lg"></span>

  </div>

  <hr class="horizontal">

  <div class="bubble">

    <span class="fa fa-inverse fa-facebook fa-fw fa-lg"></span>

  </div>

  <hr class="horizontal">

  <div class="bubble">

    <span class="fa fa-inverse fa-twitter fa-fw fa-lg"></span>

  </div>

  <hr class="horizontal">

  <div class="bubble">

    <span class="fa fa-inverse fa-github fa-fw fa-lg"></span>

  </div>

</div>

How to pin html elements to parent, but prevent rotation inheritance?

With Javascript, the answer is to dynamically add negative rotation to the child to compensate the parent.

Without Javascript, use a common container, but don't actually put the sticky element into the rotating one. The fiddle has been updated with this example.

<section>
  <div class="block" id="test">
  <p>
  ( ͡° ͜ʖ ͡°)
  </p>
  </div>
  <a id="l1" href="#" class="link">Click this!</a>
  <a id="l2" href="#" class="link">No, click this!</a>
</section>

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>

CSS Transforms Inheritance Issue

About your first issue, you are applying the technique ok. But there are 2 transformations that you need to correct, the one from the animation of the circle, that you have done, and the one from the inclination of the orbit (the rotateX(75deg)

This would be your demo with the correction applied

body {

  height: 60%;

  top: 0px;

  bottom: 0px;

  margin-top: 300px;

  background-color: #143856;

}

.moonorbit {

  position: relative;

  top: -300px;

  left: 209px;

  width: 500px;

  height: 500px;

  border: 2px solid white;

  border-radius: 50%;

  transform: rotateX(75deg);

  transform-style: preserve-3d;

}

.mooncontainer {

  position: absolute;

  top: 175px;

  left: 175px;

  width: 150px !important;

  height: 150px;

  -webkit-transform: rotateX(-75deg);

  transform: rotateX(-75deg);

  animation: moon-orbit 10s linear infinite;

  transform-style: preserve-3d;

}

.moon {

  width: 150px !important;

  height: 150px;

  border-radius: 50%;

  background-color: white;

  background-size: cover;

  animation: rotate 10s linear infinite;

  transform-style: preserve-3d;

}

.earth {

  position: absolute;

  width: 417px;

  top: 100px;

  left: 250px;

  z-index: 0;

  height: 209px;

}

.earth .planet {

  /*width: 417px !important;

   height: 417px;*/

  width: 300px !important;

  height: 300px;

  background-color: lightgreen;

  background-size: cover;

  border-radius: 50%;

  margin: 0 auto;

}

/*Moon Orbit*/

@keyframes moon-orbit {

  0% {

    transform: rotateZ(0deg) translateX(250px);

  }

  100% {

    transform: rotateZ(360deg) translateX(250px);

  }

}

@keyframes rotate {

  0% {

    transform: rotateZ(0deg) rotateX(-75deg);   /* added rotateX(-75deg) to compensate */

  }

  100% {

    transform:  rotateZ(-360deg) rotateX(-75deg);

  }

}

  <div class="earth">

    <div class="planet"></div>

  </div>

  <div class="moonorbit">

    <div class="mooncontainer">

      <div class="moon"></div>

    </div>

  </div>

---

Related Topics