text 使用Transform Rotate SCSS Mixin轻松旋转元素。只需一行SCSS，您的旋转元素将具有所需的静脉

Posted 2021-05-02

<div class="card rotate">
  <p>rotate mixin</p>
</div>

<pre>
  <code>@include rotate(180);</code>
</pre>
<p>For IE support add <a href="https://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx" target="_blank">Microsoft.Matrix</a></p>
<pre>
  <code>@include rotate(180, 0.00000000, 1.00000000, -1.00000000, 0.00000000);</code>
</pre>

@mixin rotate($deg: 0, $m11: 0, $m12: 0, $m21: 0, $m22: 0) {
  -webkit-transform: rotate($deg + deg);
  -moz-transform: rotate($deg + deg);
  -ms-transform: rotate($deg + deg);
  -o-transform: rotate($deg + deg);
  transform: rotate($deg + deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(
       M11=#{$m11}, M12=#{$m12}, M21=#{$m21}, M22=#{$m22}, sizingMethod='auto expand');
    zoom: 1;
}

/* mixin usage */
.rotate {
  @include rotate(180, 0.00000000, 1.00000000, -1.00000000, 0.00000000);
}

/* handy matrix calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html */

/* demo styles */
.card {
  width: 12em;
  margin: 2em auto .5em;
  padding: 1em;
  font-size: 1.75rem;
  line-height: 1;
  background: #ccffff;
    p {
    margin: 0;
    color: #0080FF;
  }
}
pre + p {
  margin-top: 2rem;
}
body {
  text-align: center;
}