<h2>通常時</h2>
<ul class="flexBox">
  <li>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
 </ul>

<h2>移動（transform:translate）</h2>
<ul class="flexBox translate">
  <li class="list01">
    <p>transform:translate(20px,20px);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list02">
    <p>transform:translateX(20px);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>  
  <li class="list03">
    <p>transform:translateY(20px);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list04">
    <p>transform:translateZ(20px);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list05">
    <p>transform:translate3d(20px,20px,20px);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li> 
</ul>

<h2>拡大・縮小（transform:scale）</h2>
<ul class="flexBox scale">
  <li class="list01">
    <p>transform:scale(1.2,1.2);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list02">
    <p>transform:scaleX(1.2);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>  
  <li class="list03">
    <p>transform:scaleY(1.2);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list04">
    <p>transform:scaleZ(1.2);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list05">
    <p>transform:scale3d(1.1,1.1,1.1);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li> 
</ul>

<h2>回転（transform:rotate）</h2>
<ul class="flexBox rotate">
  <li class="list01">
    <p>transform:rotate(45deg);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list02">
    <p>transform:rotateX(15deg);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>  
  <li class="list03">
    <p>transform:rotateY(30deg);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list04">
    <p>transform:rotateZ(30deg);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list05">
    <p>transform:rotate3d(1,1,1,-45deg);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li> 
</ul>

<h2>傾斜（transform:skew）</h2>
<ul class="flexBox skew">
  <li class="list01">
    <p>transform:skew(-10deg,-10deg);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
  <li class="list02">
    <p>transform:skewX(-15deg);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>  
  <li class="list03">
    <p>transform:skewY(15deg);</p>
    <div><figure><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg"></figure></div>
  </li>
</ul>

div,p,img,figure,ul,li {
  padding:0;
  margin:0;
  display: block;
}

img {
  width:100%;
}

ul {
  margin-bottom:4rem;
}

li {
  width:19%;
  list-style: none;
}

p {
  margin-bottom:1rem;
}

div {
  background: #ffdada;
  padding:2rem;
}

figure {
  padding:1rem;
  background:#fffad8;
}

.flexBox {
  display: flex;
  justify-content: space-between;
}

.translate .list01 figure {
  transform:translate(20px,20px);
}

.translate .list02 figure {
  transform:translateX(20px);
}

.translate .list03 figure {
  transform:translateY(20px);
}

.translate .list04 figure {
  transform:translateZ(20px);
}

.translate .list05 figure {
  transform:translate3d(20px,20px,20px);
}

.scale .list01 figure {
  transform:scale(1.2,1.2);
}

.scale .list02 figure {
  transform:scaleX(1.2);
}

.scale .list03 figure {
  transform:scaleY(1.2);
}

.scale .list04 figure {
  transform:scaleZ(1.2);
}

.scale .list05 figure {
  transform:scale3d(1.2,1.2,1.2);
}

.rotate .list01 figure {
  transform:rotate(15deg);
}

.rotate .list02 figure {
  transform:rotateX(30deg);
}

.rotate .list03 figure {
  transform:rotateY(30deg);
}

.rotate .list04 figure {
  transform:rotateZ(30deg);
}

.rotate .list05 figure {
  transform:rotate3d(1,1,1,-45deg);
}

.skew .list01 figure {
  transform:skew(-10deg,-10deg);
}

.skew .list02 figure {
  transform:skewX(-15deg);
}

.skew .list03 figure {
  transform:skewY(15deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.