Rotate SVC Card

Rotate SVC Card

by Nirvanachain

HTML

<h1>
Card with SVG background that changes colors in Safari 10 when rotated.
</h1>
<h4>
Card with svg as background-image
</h4>
<div id="external-card" class="card">
</div>
<h4>
Card with embedded svg tag
</h4>

<div id="inline-card" class="card">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="190" width="140" preserveAspectRatio="xMinYMin meet" viewBox="0 0 140 190" y="0" x="0">
    <defs>
      <pattern height="8" patternUnits="userSpaceOnUse" width="8" id="box-pattern">
        <rect x="0" y="0" width="8" height="8" fill="white" />
        <path id="rotated-box" d="M 4 0 L 8 4 L 4 8 L 0 4 Z" fill="red" />
      </pattern>
    </defs>
    <g>
    <rect x="1.5" y="1.5" width="136" rx="18" height="185.5" style="stroke:black; stroke-width:0.5; stroke-opacity:1;fill:#effada"/>
    <rect id="inner-rect-fill" x="8" y="10" width="122" height="169" stroke="#cc0" fill="url(#box-pattern)" rx="13" ry="13" />
    </g>
  </svg>
</div>

<input type="number" id="degrees" placeholder="Enter degrees here"/>
<p>
At 0, 90, 180, 270 it's red, otherwise blue. But only in Safari 10!
</p>

CSS

#external-card {
  width:142px;
  height:192px;
  background-image:url(https://cardgames.io/shared/images/cards/newback.svg);
  background-size:cover;
}

.card {
  width:142px;
  height:192px;
  display:inline-block;
  margin:auto;
}

JavaScript

document.getElementById('degrees').addEventListener('change', function(e) {
  var card = document.getElementById('external-card');
  card.style.transform = 'rotate(' + e.currentTarget.value + 'deg)';
  var inlineCard = document.getElementById('inline-card');

  
 inlineCard.style.transform = 'rotate3d(0,0,1,' + e.currentTarget.value + 'deg)';

})