回答編集履歴

1 読みやすく修正。

kei344 score 56247

2016/08/05 00:53  投稿

雑ですが。

```CSS

.anim {

-webkit-animation-name: roundy;

-webkit-animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: once;

-webkit-animation-duration: 5s;

-moz-animation-name: roundy;

-moz-animation-timing-function: ease-in-out;

-moz-animation-iteration-count: once;

-moz-animation-duration: 5s;

animation-name: roundy;

animation-timing-function: ease-in-out;

animation-iteration-count: once;

animation-duration: 10s;

}

@-webkit-keyframes roundy {

0%  { transform: translateZ( calc(100vw / 1.5 * -1) ); }

25%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 90deg ); }

50%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 180deg ); }

75%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 270deg ); }

100%  { transform: translateZ( calc(100vw / 2.0 * -1) ) rotateY( 360deg ); }

}

@-moz-keyframes roundy {

0%  { transform: translateZ( calc(100vw / 1.5 * -1) ); }

25%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 90deg ); }

50%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 180deg ); }

75%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 270deg ); }

100%  { transform: translateZ( calc(100vw / 2.0 * -1) ) rotateY( 360deg ); }

}

@keyframes roundy {

0%  { transform: translateZ( calc(100vw / 1.5 * -1) ); }

25%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 90deg ); }

50%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 180deg ); }

75%  { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 270deg ); }

100%  { transform: translateZ( calc(100vw / 2.0 * -1) ) rotateY( 360deg ); }

}

```**動くサンプル：**[https://jsfiddle.net/12u0tzoh/1/](https://jsfiddle.net/12u0tzoh/1/)

---

【CSS アニメーション - CSS | MDN】

[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

【[CSS]あなたのウェブページにキーフレームを使ったアニメーションをちょこっと適用するチュートリアルのまとめ | コリス】

[http://coliss.com/articles/build-websites/operation/css/enhance-your-sites-with-css3-animations-by-onextrapixel.html](http://coliss.com/articles/build-websites/operation/css/enhance-your-sites-with-css3-animations-by-onextrapixel.html)

【animation-name－CSS3リファレンス】

[http://www.htmq.com/css3/animation-name.shtml](http://www.htmq.com/css3/animation-name.shtml)