HTMLとCSSでプリーツスカート作ってみた CSS3D

前書きと挨拶

みなさんこんにちは、前回メイド服をCSSとHTML作った人くもことなおこです。

https://blog.fascode.net/2021/07/25/maiddress/

けどこれ実質2dじゃん今度は3dのメイド服作ってみたいな〜と思いとりあえず練習をしよう！

複雑なものだけどもシンプルなものって何だろうと思ったときにふと思いついたのがスカートでした。

ということで今回はCSSとHTML（CSS3D）を用いて立体のプリーツスカートを作ってみました！

本来はthreejsなどを使うべきなのでしょうけど今回は同じCSSとHTMLだけで作るという縛りが面白いと思いましたし、新たに学ぶのは時間がかかりそうなので今回は自分が知っているCSS3Dでやってみたいと思います。

実際に作る

まずはスカートついて調べます。

JK スカートなど検索して一番作りたいもの近いスカートの種類について調べます。

自分が今回作りたいスカートがプリーツスカートというジャンルのものらしい。

プリーツスカート作り方などで調べていると布を切って作るような型紙ばかり出てきます。

まあそれは仕方ないですね。

Youtubeなどでも調べると実際に作る様子を動画にしてくださっている方の動画を参考にスカートの構造について考えました。

問題があれば削除します。

ひらひら部分とベルト？腰？の部分を作る！

プリーツスカートの構造はおおよそわかったので次にHTMLを書いていきたいと思います。

（ソースコードだけみたいじゃって方はこちら→https://github.com/naoko1010hh/css3d-experiment/tree/main/skirt/03 ）

HTMLを記述していく

雛形にCSS リセットのressのlinkとcssのlink、3d化するためにラップしたプリーツスカートパーツ分けプリーツとベルト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS3dの練習</title>
</head>
<body>
<!-- スカートのラップ -->
    <div class="skirt-css3d">
        <!-- スカートのベルト -->
        <div class="belt">
        </div>
        <!-- スカートのプリーツ -->
        <div class="plaits">
        </div>
    </div>

</body>
</html>

次にプリーツとベルトの中にパーツを配置していきます。

CSSとHTMLだけでは布用に折り目つけるようなプログラムはかけないので折り目ごとに各パーツを作る必要があります。ベルト部分は特殊で影の演算をしないことを逆手に取る作戦で楽したいと思います。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS3dの練習</title>
</head>
<body>
    <div class="skirt-css3d">
        <div class="belt">
            <div class="middle">
                <div class="p p1"></div>
                <div class="p p2"></div>
                <div class="p p3"></div>
                <div class="p p4"></div>
                <div class="p p5"></div>
                <div class="p p6"></div>
                <div class="p p7"></div>
                <div class="p p8"></div>
                <div class="p p9"></div>
                <div class="p p10"></div>
                <div class="p p11"></div>
                <div class="p p12"></div>
                <div class="p p13"></div>
                <div class="p p14"></div>
                <div class="p p15"></div>
                <div class="p p16"></div>
                <div class="p p17"></div>
                <div class="p p18"></div>
                <div class="p p19"></div>
                <div class="p p20"></div>
                <div class="p p21"></div>
                <div class="p p22"></div>
                <div class="p p23"></div>
                <div class="p p24"></div>
                <div class="p p25"></div>
                <div class="p p26"></div>
                <div class="p p27"></div>
                <div class="p p28"></div>
                <div class="p p29"></div>
                <div class="p p30"></div>
                <div class="p p31"></div>
                <div class="p p32"></div>
                <div class="p p33"></div>
                <div class="p p34"></div>
                <div class="p p35"></div>
                <div class="p p36"></div>
            </div>
        </div>
        <div class="plaits">
            <div class="top">
                <div class="p p1">
                    <div></div>
                </div>
                <div class="p p2">
                    <div></div>
                </div>
                <div class="p p3">
                    <div></div>
                </div>
                <div class="p p4">
                    <div></div>
                </div>
                <div class="p p5">
                    <div></div>
                </div>
                <div class="p p6">
                    <div></div>
                </div>
                <div class="p p7">
                    <div></div>
                </div>
                <div class="p p8">
                    <div></div>
                </div>
                <div class="p p9">
                    <div></div>
                </div>
                <div class="p p10">
                    <div></div>
                </div>
                <div class="p p11">
                    <div></div>
                </div>
                <div class="p p12">
                    <div></div>
                </div>
                <div class="p p13">
                    <div></div>
                </div>
                <div class="p p14">
                    <div></div>
                </div>
                <div class="p p15">
                    <div></div>
                </div>
                <div class="p p16">
                    <div></div>
                </div>
                <div class="p p17">
                    <div></div>
                </div>
                <div class="p p18">
                    <div></div>
                </div>
                <div class="p p19">
                    <div></div>
                </div>
                <div class="p p20">
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

SCSSを記述していく（実質CSS）

次にSCSSを書いていきます。CSSとはちょいと違いますが実質CSSなところはあるので時短するためにお許しくださいm(_ _)m

使う色を変数に指定し背景を作ります。

$back1:#a9a9a9;
$back2:#a4a4a4;

$skirt1:#865fbc;
$skirt2:#523a73;
$skirt3:#fff;
$skirt4:#00000000;
$skirt5:#00000099;

body{
  background: 
  linear-gradient(
    45deg, 
    $back1 25%, 
    transparent 25%, 
    transparent 75%, 
    $back1 75%
  ),
  linear-gradient(
    45deg, 
    $back1 25%, 
    transparent 25%, 
    transparent 75%, 
    $back1 75%
  );
  background-color: $back2;
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

よく画像編集ソフトなどで見る背景が透明なときの画像ができました！

CSS3dの練習

次にCSSで3dを使うためのラップに対してtransform-style: preserve-3dなどの命令を書きます。

$back1:#a9a9a9;
$back2:#a4a4a4;

$skirt1:#865fbc;
$skirt2:#523a73;
$skirt3:#fff;
$skirt4:#00000000;
$skirt5:#00000099;

body{
  background: 
  linear-gradient(
    45deg, 
    $back1 25%, 
    transparent 25%, 
    transparent 75%, 
    $back1 75%
  ),
  linear-gradient(
    45deg, 
    $back1 25%, 
    transparent 25%, 
    transparent 75%, 
    $back1 75%
  );
  background-color: $back2;
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.skirt-css3d{
  transform-style: preserve-3d;
  width:45px;
  height: 45px;
  position: relative;
  top: 50%;
  margin: 0 auto;
  transform-origin: center;
  transform: scale(5) translateY(-50%) rotateY(30deg) rotateX(100deg) rotateZ(20deg);
  animation:rotate 6s infinite linear;
}

次にベルト部分を作ります。

ベルト部分は●を作ると大変なので板を36作り中心でクロスさせ、上下に板と同じ色の丸を配置します。

そうすると若干ギザギザしますがそこまで重くならずに円柱を作ることができます。ただし空洞がないです。なので現実だったら履けないです。

$back1:#a9a9a9;
$back2:#a4a4a4;

$skirt1:#865fbc;
$skirt2:#523a73;
$skirt3:#fff;
$skirt4:#00000000;
$skirt5:#00000099;

body{
  background: 
  linear-gradient(
    45deg, 
    $back1 25%, 
    transparent 25%, 
    transparent 75%, 
    $back1 75%
  ),
  linear-gradient(
    45deg, 
    $back1 25%, 
    transparent 25%, 
    transparent 75%, 
    $back1 75%
  );
  background-color: $back2;
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.skirt-css3d{
  transform-style: preserve-3d;
  width:45px;
  height: 45px;
  position: relative;
  top: 50%;
  margin: 0 auto;
  transform-origin: center;
  transform: scale(5) translateY(-50%) rotateY(30deg) rotateX(100deg) rotateZ(20deg);
  animation:rotate 6s infinite linear;
  .belt{
    transform-style: preserve-3d;
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 5rem;
    background-color: $skirt2;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    &::before{
      content: "";
      display: block;
      width: 42px;
      height: 42px;
      border-radius: 5rem;
      background-color: $skirt2;
      transform-style: preserve-3d;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      transform: translateZ(3.4px);

    }
    &::after{
      content: "";
      display: block;
      width: 42px;
      height: 42px;
      border-radius: 5rem;
      background-color: $skirt2;
      transform-style: preserve-3d;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      transform: translateZ(1.5px);

    }
    .p{
      
    transform-style: preserve-3d;
      @for $i from 1 to 36 {
        &.p#{$i}{
          display: block;
          background-color: $skirt2;
          height: 3px;
          width: 42px;
          transform-origin:center;
          transform: rotateX(90deg) rotateY(-10deg*$i) translateY(1.5px);
          position: absolute;
          top: 20px;
        }
      }
    }
  }
}

CSS3dの練習

次はプリーツとアニメーションを作ります。

最後に丸く広がるようにtransformでうまいことやってforで何度も書かなくて良いようにプリーツとアニメーションを作れば完成！

$back1:#a9a9a9;
$back2:#a4a4a4;

$skirt1:#865fbc;
$skirt2:#523a73;
$skirt3:#fff;
$skirt4:#00000000;
$skirt5:#00000099;

@keyframes rotate {
  0% {transform:scale(5)  rotateX(60deg)  rotateZ(0deg)}
  33% {transform:scale(5)  rotateX(130deg) rotateZ(120deg)}
  66% {transform:scale(5)  rotateX(60deg) rotateZ(240deg)}
  100% {transform:scale(5)  rotateX(60deg) rotateZ(360deg)}
}
body{
  background: 
  linear-gradient(
    45deg, 
    $back1 25%, 
    transparent 25%, 
    transparent 75%, 
    $back1 75%
  ),
  linear-gradient(
    45deg, 
    $back1 25%, 
    transparent 25%, 
    transparent 75%, 
    $back1 75%
  );
  background-color: $back2;
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
$w:300px;
.skirt-css3d{
  transform-style: preserve-3d;
  width:45px;
  height: 45px;
  position: relative;
  top: 50%;
  margin: 0 auto;
  transform-origin: center;
  transform: scale(5) translateY(-50%) rotateY(30deg) rotateX(100deg) rotateZ(20deg);
  animation:rotate 6s infinite linear;
  .belt{
    transform-style: preserve-3d;
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 5rem;
    background-color: $skirt2;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    &::before{
      content: "";
      display: block;
      width: 42px;
      height: 42px;
      border-radius: 5rem;
      background-color: $skirt2;
      transform-style: preserve-3d;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      transform: translateZ(3.4px);

    }
    &::after{
      content: "";
      display: block;
      width: 42px;
      height: 42px;
      border-radius: 5rem;
      background-color: $skirt2;
      transform-style: preserve-3d;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      transform: translateZ(1.5px);

    }
    .p{
      
    transform-style: preserve-3d;
      @for $i from 1 to 36 {
        &.p#{$i}{
          display: block;
          background-color: $skirt2;
          height: 3px;
          width: 42px;
          transform-origin:center;
          transform: rotateX(90deg) rotateY(-10deg*$i) translateY(1.5px);
          position: absolute;
          top: 20px;
        }
      }
    }
  }
  .plaits{

    transform-style: preserve-3d;
    position: absolute;
    width:40px;
    height: 40px;
    top: 1.5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateZ(-3px);
    .top{
      position: absolute;
      top: 20px;
      left: 15px;
      .p{
        transform-style: preserve-3d;
        position: absolute;
        width: 10px;
        height: 40px;
        background:
        linear-gradient(
          -188deg ,
          $skirt2,
          $skirt4 98%,
          $skirt4 0,
          $skirt4 100%
          ),
        linear-gradient(
          -188deg ,
        $skirt1 85%,
        $skirt3 0,
         $skirt3 88%,
         $skirt1 0,
         $skirt1 90%,
         $skirt3 0,
         $skirt3 95%,
        $skirt4 0,
        $skirt4 98%) ;
        transform-origin: top center;

        &::after{
          display: block;
          content: "";
          width: 4px;
          height: 40px;
          background:
          linear-gradient(
            -188deg ,
            $skirt5,
            $skirt4 98%,
            $skirt4 0,
            $skirt4 100%
            ),  linear-gradient(
            -188deg ,
          $skirt1 85%,
          $skirt3 0,
           $skirt3 88%,
           $skirt1 0,
           $skirt1 90%,
           $skirt3 0,
           $skirt3 95%,
          $skirt4 0,
          $skirt4 98%);
          position: absolute;
          transform-origin: left center;
          z-index: 10;
          transform: rotateY(36deg);
        }
        &::before{
          display: block;
          content: "";
          width: 4px;
          height: 40px;
          background:
          linear-gradient(
            -188deg ,
            $skirt5,
            $skirt4 98%,
            $skirt4 0,
            $skirt4 100%
            ),  linear-gradient(
            -188deg ,
          $skirt1 85%,
          $skirt3 0,
           $skirt3 88%,
           $skirt1 0,
           $skirt1 90%,
           $skirt3 0,
           $skirt3 95%,
          $skirt4 0,
          $skirt4 98%);
          position: absolute;
          transform-origin: left center;
          z-index: 20;
          transform: translateZ(-1.8px) translateX(-0.8px) rotateY(6deg);
        }
        @for $i from 1 to 25 {
          &.p#{$i}{
            transform: rotateZ(-18deg*$i) rotateX(-82deg) translatez(20px)  rotateY(9deg);
          }
        }
        
      }
    }
  }
}

CSS版

@keyframes rotate {
  0% {
    transform: scale(5) rotateX(60deg) rotateZ(0deg); }
  33% {
    transform: scale(5) rotateX(130deg) rotateZ(120deg); }
  66% {
    transform: scale(5) rotateX(60deg) rotateZ(240deg); }
  100% {
    transform: scale(5) rotateX(60deg) rotateZ(360deg); } }
body {
  background: linear-gradient(45deg, #a9a9a9 25%, transparent 25%, transparent 75%, #a9a9a9 75%), linear-gradient(45deg, #a9a9a9 25%, transparent 25%, transparent 75%, #a9a9a9 75%);
  background-color: #a4a4a4;
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  height: 100vh;
  width: 100vw;
  overflow: hidden; }

.skirt-css3d {
  transform-style: preserve-3d;
  width: 45px;
  height: 45px;
  position: relative;
  top: 50%;
  margin: 0 auto;
  transform-origin: center;
  transform: scale(5) translateY(-50%) rotateY(30deg) rotateX(100deg) rotateZ(20deg);
  animation: rotate 6s infinite linear; }
  .skirt-css3d .belt {
    transform-style: preserve-3d;
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 5rem;
    background-color: #523a73;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto; }
    .skirt-css3d .belt::before {
      content: "";
      display: block;
      width: 42px;
      height: 42px;
      border-radius: 5rem;
      background-color: #523a73;
      transform-style: preserve-3d;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      transform: translateZ(3.4px); }
    .skirt-css3d .belt::after {
      content: "";
      display: block;
      width: 42px;
      height: 42px;
      border-radius: 5rem;
      background-color: #523a73;
      transform-style: preserve-3d;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      transform: translateZ(1.5px); }
    .skirt-css3d .belt .p {
      transform-style: preserve-3d; }
      .skirt-css3d .belt .p.p1 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-10deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p2 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-20deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p3 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-30deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p4 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-40deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p5 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-50deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p6 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-60deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p7 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-70deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p8 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-80deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p9 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-90deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p10 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-100deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p11 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-110deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p12 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-120deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p13 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-130deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p14 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-140deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p15 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-150deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p16 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-160deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p17 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-170deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p18 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-180deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p19 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-190deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p20 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-200deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p21 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-210deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p22 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-220deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p23 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-230deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p24 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-240deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p25 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-250deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p26 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-260deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p27 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-270deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p28 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-280deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p29 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-290deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p30 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-300deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p31 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-310deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p32 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-320deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p33 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-330deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p34 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-340deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
      .skirt-css3d .belt .p.p35 {
        display: block;
        background-color: #523a73;
        height: 3px;
        width: 42px;
        transform-origin: center;
        transform: rotateX(90deg) rotateY(-350deg) translateY(1.5px);
        position: absolute;
        top: 20px; }
  .skirt-css3d .plaits {
    transform-style: preserve-3d;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 1.5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateZ(-3px); }
    .skirt-css3d .plaits .top {
      position: absolute;
      top: 20px;
      left: 15px; }
      .skirt-css3d .plaits .top .p {
        transform-style: preserve-3d;
        position: absolute;
        width: 10px;
        height: 40px;
        background: linear-gradient(-188deg, #523a73, #00000000 98%, #00000000 0, #00000000 100%), linear-gradient(-188deg, #865fbc 85%, #fff 0, #fff 88%, #865fbc 0, #865fbc 90%, #fff 0, #fff 95%, #00000000 0, #00000000 98%);
        transform-origin: top center; }
        .skirt-css3d .plaits .top .p::after {
          display: block;
          content: "";
          width: 4px;
          height: 40px;
          background: linear-gradient(-188deg, #00000099, #00000000 98%, #00000000 0, #00000000 100%), linear-gradient(-188deg, #865fbc 85%, #fff 0, #fff 88%, #865fbc 0, #865fbc 90%, #fff 0, #fff 95%, #00000000 0, #00000000 98%);
          position: absolute;
          transform-origin: left center;
          z-index: 10;
          transform: rotateY(36deg); }
        .skirt-css3d .plaits .top .p::before {
          display: block;
          content: "";
          width: 4px;
          height: 40px;
          background: linear-gradient(-188deg, #00000099, #00000000 98%, #00000000 0, #00000000 100%), linear-gradient(-188deg, #865fbc 85%, #fff 0, #fff 88%, #865fbc 0, #865fbc 90%, #fff 0, #fff 95%, #00000000 0, #00000000 98%);
          position: absolute;
          transform-origin: left center;
          z-index: 20;
          transform: translateZ(-1.8px) translateX(-0.8px) rotateY(6deg); }
        .skirt-css3d .plaits .top .p.p1 {
          transform: rotateZ(-18deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p2 {
          transform: rotateZ(-36deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p3 {
          transform: rotateZ(-54deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p4 {
          transform: rotateZ(-72deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p5 {
          transform: rotateZ(-90deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p6 {
          transform: rotateZ(-108deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p7 {
          transform: rotateZ(-126deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p8 {
          transform: rotateZ(-144deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p9 {
          transform: rotateZ(-162deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p10 {
          transform: rotateZ(-180deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p11 {
          transform: rotateZ(-198deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p12 {
          transform: rotateZ(-216deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p13 {
          transform: rotateZ(-234deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p14 {
          transform: rotateZ(-252deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p15 {
          transform: rotateZ(-270deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p16 {
          transform: rotateZ(-288deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p17 {
          transform: rotateZ(-306deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p18 {
          transform: rotateZ(-324deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p19 {
          transform: rotateZ(-342deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p20 {
          transform: rotateZ(-360deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p21 {
          transform: rotateZ(-378deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p22 {
          transform: rotateZ(-396deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p23 {
          transform: rotateZ(-414deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }
        .skirt-css3d .plaits .top .p.p24 {
          transform: rotateZ(-432deg) rotateX(-82deg) translatez(20px) rotateY(9deg); }

/*# sourceMappingURL=style.css.map */

CSS3dの練習

完成品

ぐるぐるまわるで〜↓

https://naoko1010hh.github.io/css3d-experiment/skirt/03/tutorial/06/

ふと皆さん紫のスカートに違和感あります？最近話題の馬娘をやっていれば違和感ないかもですね。

最後に

今回CSS3Dでプリーツスカートを作ってみましたが

なかなか良い感じに仕上がったのではないかなっと思います。

CSSとHTMLだけで立体メイド服を作ることも現実的に可能かもしれません。

今後もCSSとHTMLを鍛えて変態的な技術を身に着けたいと思います。

（実際はjsとか、CMSとかゴリゴリ使えるようにならないと仕事にならんと思うけど。）

The post HTMLとCSSでプリーツスカート作ってみた CSS3D first appeared on FascodeNetwork Blog.

TechWatch

HTMLとCSSでプリーツスカート作ってみた CSS3D

前書きと挨拶

実際に作る

HTMLを記述していく

SCSSを記述していく（実質CSS）

完成品

最後に

Archives