CSSで回転するコインを作る

試したらそれっぽくできたので記録として。

あくまでそれっぽいだけですし、力技で形にしていますので、記事を読まれる場合はあまり期待されないほうが良いかと思います。

実現したいこと

実現したいことは以下の通り。

• CSSのみで回転するコインを作る

サンプルとコード

以下が完成サンプルです。

以下がコードですが、まずはHTML。

<div class="coin"></div>

今回は表示領域を確保する必要があったため、.coinというクラスのdivを作り、その中にbefore疑似要素を作ってそれをコインにします。

コイン自体は疑似要素単体で構成しているため、何らかの要素に付与するアイコンとして使うことが可能です。

それでは以下がCSSです。

.coin {
  position: relative;
  display: block;
  -webkit-perspective:250px;
  perspective: 250px;
  overflow: hidden;/* 上記perspectiveでも効果がない場合 */
  width: 200px;
  height: 200px;
  margin-right: auto;
  margin-left: auto;
  background-color: #333;
}
.coin:before {
  font-size: 30px;
  font-weight: bold;
  line-height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -26px;
  margin-left: -26px;
  content: '$';
  animation: coin 2.5s linear infinite;
  text-align: center;
  color: #ffdf11;
  border-top: 1px solid #bf9005;
  border-right: 1px solid #ffe470;
  border-bottom: 1px solid #ffe470;
  border-left: 1px solid #bf9005;
  border-radius: 50%;
  background-color: #ffc311;
  box-shadow: 0 0 0 2px #ffdf11, 2px 2px 4px 0 rgba(0,0,0,.1);
}
@keyframes coin {
  0% {
    transform: rotateY(4deg) scaleX(1);
    background-color: #ffda47;
    box-shadow: 0 0 0 2px #ce9b04, 2px 2px 4px 0 rgba(0,0,0,.1), 0 0 0 #bf9005;
  }
  50% {
    transform: rotateY(-85deg) scaleX(1.4);
    background-color: #ce9b04;
    box-shadow: 0 0 0 2px #ffdf11, 2px 2px 4px 0 rgba(0,0,0,.1), 5px 0 0 2px #876501;
  }
  51% {
    transform: rotateY(-85deg) scaleX(1.4);
    background-color: #ce9b04;
    box-shadow: 0 0 0 2px #ffdf11, 2px 2px 4px 0 rgba(0,0,0,.1), -5px 0 0 2px #fcee80;
  }
  100% {
    transform: rotateY(-4deg) scaleX(1);
    background-color: #ffda47;
    box-shadow: 0 0 0 2px #ffdf11, 2px 2px 4px 0 rgba(0,0,0,.1), 0 0 0 0 #ffda47;
  }
}

background-colorを切り替えるだけで反射っぽい感じがでますので、あとはどこまで再現するか（できるか)になってきます。

今回はbox-shadowとscaleXを用いてなんとかコインの厚みが表現できないかと試しています。

ある程度それっぽく見えるはずですが、サイズが大きくなればなるほどごまかしが効かないので、このサイズが限界、あるいは既に崩れているもしれません。

とはいえ本来はワンポイントで小さく使うためにと考えていたので、実際に使うサイズで考えれば及第点ではないか、と思いたいです…。

サイズを変更する場合、borderやbox-shadowの幅を調整する必要があります。

錯覚を利用する

-85degなど妙な設定がありますが、これは錯覚の利用を意図しています。

具体的には、コインが回転する際に側面だけが見える角度(つまり-90deg)の手前(ここが-85deg)で止め、そこから逆再生のように動かすことで、厚みのない事実をごまかしつつ、実際には1回転していないのにしているように思わせます。

サンプルを実際に見てもらえれば、360度や180度の回転はなくても、0度から85度までの間を往復することでコインが一回転しているように見えるはずです。

なお、試したところコインのサイズによっては-80degの方が良い場合もあり、ここもサイズ毎に調整する必要がある部分です。

テキストや背景画像の一部などが消える

• iOS8 Safariで-webkit-transform: rotateX/rorateYが効かない/要素が消える

スマホ閲覧時に上記記事と同種の問題が発生していましたので、対策として以下を親要素(今回は.coinをつけたdiv)に追加しています。

.coin {
 -webkit-perspective:250px;
 perspective: 250px;
 overflow: hidden;
}

今回の記事を書く前のサンプルでは上記の記述がなくても表示が確認できていたのですが、この記事のサンプルでは必要になりました。

なお、perspectiveが効かない場合はoverflow: hidden;で表示可能であることも確認しましたので、一応そちらも記術しています。

結び

contentで「$」を記載していますが、ここを画像に変えたり、なくしたりすれば色々派生タパーンが作れると思います。要CSS調整ですが。

「$」の部分がプルプル震えて見えるかもしれませんが(Chromeだとプルプルしています)、この点に対して良い解決方法が見つかりませんでした。

アイコンに使う場合は潰れて邪魔になる可能性も高いですし、実際に使う場合はcontentは空の方がよいかもしれません。

もっと見映えもコードもきれいなコインの作り方もあるのではと思いますが、情報を調べず思いつきで作りましたので、その点はご容赦いただければと。