CSSだけで斜めにスライドさせる方法

CSSでループするスライダーを斜めにして実装します。

まずはデモから！

See the Pen
斜めにスライダーさせる方法 by sayuri (@giraffeweb)
on CodePen.0

HTMLは割とシンプルな感じです。
liをdivに変えてもいいですし、liの中身にaタグやimgを突っ込んでもOKです。

<section id="keyIndex">
  <div id="keyImages">
    <div class="keyBlock flex">
      <ul class="flex">
      <li>
        <div class="flex box01"><p>BOX01</p></div>
      </li>
      <li>
        <div class="flex box02"><p>BOX02</p></div>
      </li>
      <li>
        <div class="flex box03"><p>BOX03</p></div>
      </li>
      </ul>
    </div>
  </div>
</section>

肝心なCSSの解説です。

#keyIndex {
  position: relative;
  padding: 0;
  width: 100%;
  height: 100vh;
}

↑↑↑↑↑↑
一番大枠のdivにrelativeを指定して、幅・高さも一緒に指定します。

#keyImages {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 50;
    .keyBlock {
        margin: 0 0 0 auto;
	width: 50%;
	height: 200%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 100% 40%;
	transform-origin: 100% 40%;
    }
}

↑↑↑↑↑↑
さらにその中の親＞子divには「position: absolute;」を指定します。
開始場所の指定がある場合はここで調整してください。

親＞子＞孫のdivはrotateを使用してここで斜めに傾けます。
また高さを大きくとるために200％と指定します。
transform-originで要素の変形transformにおける原点を指定します。

ul {
  webkit-animation: listDown 15s linear infinite;
  animation: listDown 15s linear infinite;
  flex-direction: column;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 27, 0, 1);
  li {
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	div {
	  transform: rotate(-45deg);
            width: 500px;
            height: 300px;
            background-color: #ddd;
         }
     }
}

@keyframes listDown{
	from{
		-webkit-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
	}
	
	to{
		-webkit-transform:translate3d(0,50%,0);
		transform:translate3d(0,50%,0)}
}

↑↑↑↑↑↑
上から下へ移動するanimationを@keyframesで指定します。
liにtransformを指定しないと、要素も斜めになったままなので、ここでマイナス値を指定してあげます。
これでまっすぐになりました。

いやー！最初JSなどで挑戦したんですが全然うまくいかなくて…
CSSでなんとかうまくいってよかったです！

同じように困っている方の助けになれば幸いです！

Share: