<html>
<head>
<style>
  .transparent {
    opacity: 0.5;
  }

  .transformed {
    transform: rotate(10deg);
  }
</style>
</head>
<body>

<p>The <span class="transformed">span in this paragraph</span> has a transform, which has no effect on inlines.</p>

<p>The <span class="transparent transformed">span in this paragraph</span> has a transform, which has no effect on inlines. It also has opacity to throw it into a Layer.</p>

<p>The <span class="transparent transformed" style="display: inline-block;">span in this paragraph</span> has a transform and opacity, and is an inline-block. So it should respect the transform.</p>

</div>