Help us understand the problem. What is going on with this article?

CSSでトルネードを巻き起こす

More than 1 year has passed since last update.

sample.gif

※ gif用にトルネードの色を変えています。

お使いの端末の性能によっては処理落ちするケースがあるので注意してください
ブラウザが落ちることもあります


実際に見たい方はこちらを参照
https://junya0215.github.io/cacao_ame/design_art/tornado/

HTML

<div class="tornado">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div>
                        <div>
                          <div>
                            <div>
                              <div>
                                <div>
                                  <div>
                                    <div>
                                      <div>
                                        <div class="turn">
                                          <div>
                                            <div>
                                              <div>
                                                <div>
                                                  <div>
                                                    <div>
                                                      <div>
                                                        <div>
                                                          <div>
                                                            <div>
                                                              <div>
                                                                <div>
                                                                  <div>
                                                                    <div>
                                                                      <div></div>
                                                                    </div>
                                                                  </div>
                                                                </div>
                                                              </div>
                                                            </div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body{
  background: black;
}

.tornado{
  position: fixed;
  bottom: 1%; left: 50%;

  width: 60px; height: 60px;
  border: 4px solid;
  border-right-color: transparent;
  border-radius: 100%;

  transform-style: preserve-3d;
  /* scale サイズ調整用 */
  transform: translate(-50%, 0%) rotateX(77deg) scale(.85);
}

.tornado div{
  position: absolute;
  top: 50%; left: 50%;

  width: 120%; height: 120%;
  border: inherit;
  border-color: inherit; 
  border-right-color: inherit;
  border-radius: inherit;

  box-sizing: border-box;
  transform-style: preserve-3d;
  transform: translate(-50%,-50%) rotate(0) translateZ(0);
}

.tornado div.turn,
.tornado div.turn div{
  width: 90%; height: 90%;
}

/* animation */
.tornado{
  animation: 
    rootSpin 3s linear infinite alternate,
    changeColor 30s steps(10,start) infinite alternate;
}

.tornado div{
  transition: border-color .1s;
  animation: spin 3s linear infinite alternate;
}

.tornado div.turn{
  animation: 
    spin 3s linear infinite alternate, 
    changeColor 30s -5s steps(10,start) infinite alternate-reverse;
}

@keyframes rootSpin{
  from{
    transform-origin: -200% bottom;
    transform: translate(-50%, -50%) rotateX(77deg) scale(.85) rotate(0) rotateY(5deg);
  }
  to{
    transform-origin: +200% bottom;
    transform: translate(-50%, -50%) rotateX(77deg) scale(.85) rotate(360deg) rotateY(5deg);
  }
}

@keyframes spin{
  from{
    transform: translate(-50%,-50%) translateX(2px) rotate(0) translateZ(15px);
  }
  to{
    transform: translate(-50%,-50%) translateX(2px) rotate(360deg) translateZ(25px);
  }
}

@keyframes changeColor{
  00%{  border-color: dodgerblue;  border-right-color: transparent; }
  10%{  border-color: red;         border-right-color: transparent; }
  20%{  border-color: white;       border-right-color: transparent; }
  30%{  border-color: forestgreen; border-right-color: transparent; }
  40%{  border-color: magenta;     border-right-color: transparent; }
  50%{  border-color: crimson;     border-right-color: transparent; } 
  60%{  border-color: yellow;      border-right-color: transparent; }
  70%{  border-color: yellowgreen; border-right-color: transparent; }
  80%{  border-color: pink;        border-right-color: transparent; }
  90%{  border-color: orange;      border-right-color: transparent; }
  100%{ border-color: dodgerblue;  border-right-color: transparent; } 
}

解説

円を縦に並べる

divで階層構造をつくります
先代のdiv(.tornado)に対して rotateX()でX回転させます。

transform-style: preserve-3dも指定します。
preserve-3dで 子要素を3d描画できるようになります。

.tornado{
  transform-style: preserve-3d;
  transform: rotateX(70deg);
}

divの子孫に対してtranslateZ()を指定すればできます
translateZ()は %で指定できないので注意しましょう
Zの値を大きくすれば要素の間隔が広がります。

.tornado div{
  transform-style: preserve-3d;
  transform: translateZ(??px);
}

ブラウザ

ChromeSafariは正常に動作

Firefoxinherit(継承)を利用したアニメーションが動かないが、トルネードは正常に動作

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away