CSS で画像をひねって浮かせたい

## やりたいこと
![Screen Shot 2021-07-23 at 12.20.50 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/8109ed0a-0233-c3ce-03ba-0b58845ed449.png)

左の画像を CSS を使って右のように表示したい。

手順は、

1. 影を付ける
1. 画像をひねる

の順でやっていく。特に、浮いた感じの影を付ける部分は、解説記事があんまり見当たらなかったので、備忘として Step/Step で残しておく。画像のひねりは、おまけだ。

結論だけ欲しいせっかちさんは、[kurab/floaatingObjectCSS](https://github.com/kurab/floatingObjectCSS) へ Go!

## 下準備
html を準備する。こういった要素は、flex box の中に入っていることが多いと思われるので、その前提で。index.html, style.css, newyearcard2021.png はすべて同一階層に配置されている。

```index.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">
  <title>Floating Object</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container">
    <h1 class="header">Floating Object</h1>
    <div class="floatingContainer">
      <div class="floatingObject">
        <img class="floatingCard" src="./newyearcard2021.png" alt="">
      </div>
    </div>
  </div>
</body>
</html>
```
とりあえず、flex box に入れてみる。画像が大きかったので、幅も調整した。分かりやすいように、border と padding が入ってる。

```style.css
.headingText,
.floatingContainer,
.floatingObject,
.floatingCard {
  border: 1px solid #000;
  padding: 10px;
}
* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.headingText {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.floatingContainer {
  height: 90vh;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.floatingCard {
  max-width: 300px;
}
```
![Screen Shot 2021-07-23 at 10.50.07 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/4c439020-7649-559a-f7be-8f633b665347.png)


# 影を付ける
ひとまず、画像が邪魔なので、一旦、hello とでもしておく。

```index.html
    <div class="floatingContainer">
      <div class="floatingObject">
        <!--img class="floatingCard" src="./newyearcard2021.png" alt=""-->
        hello
      </div>
      hello
    </div>
```

(説明に)不要な border を消して、```floatingObject``` に仮で形をつける。影を含めた状態で真ん中あたりに来てほしいので、```margin-bottom``` をつけた。

```style.css
/* .headingText,
.floatingContainer, */
.floatingObject,
.floatingCard {
  border: 1px solid #000;
  padding: 10px;
}
...
.floatingObject {
  width: 30%;
  height: 300px;
  background-color: red;
  margin-bottom: 20vh;
}
```

![Screen Shot 2021-07-23 at 11.06.52 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/54d5ab14-29d1-c030-7740-c49ddb6d7ba7.png)

```floatingObject``` クラスに ```:after``` を使い、影を表示する箱を作る。

```style.css
...
.floatingObject {
  ...
  position: absolute;
}
.floatingObject:after {
  border: 1px solid blue;
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  top: 105%;
  left: -1%;
}
```
![Screen Shot 2021-07-23 at 11.17.16 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/862e2db0-964d-3ad7-2bd6-2b0f9d30088b.png)
```margin-bottom``` が効かなくなっちゃったが、後で調整する。この青い箱に影を描く。

```style.css
...
.floatingObject:after {
  ...
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: -1;
}
```

![Screen Shot 2021-07-23 at 11.21.46 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/99f85e1f-62a1-6610-b1ea-9204f5e6db26.png)

できた。影の表現方法は色々あると思うので、ご自由に。影は後ろにあるべきなので、```z-index``` を調整した。画像(html を最初のものに)を元に戻して、いらないものを消すと、style.css はこんな感じになっている。margin-bottom 問題は absolute じゃなくて、relative にした。

```style.css
* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.headingText {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.floatingContainer {
  height: 90vh;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.floatingCard {
  max-width: 300px;
}

.floatingObject {
  position: relative;
  margin-bottom: 10vh
}
.floatingObject:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  top: 105%;
  left: -1%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: -1;
}
```
![Screen Shot 2021-07-23 at 11.38.21 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/804a2475-6fc4-1b92-6bed-baca3c8a8557.png)
浮いてる！！牛が浮いてる絵が浮いてる！！これで、影付けはおしまい。

影のサイズを変えたい場合は、```.floatingObject:after``` の ```width```, ```height``` を変更すれば良い。位置の調整は、```top```, ```left``` にて。

## 画像をひねる
まず、回転させて、位置を調整する

```style.css
.floatingCard {
  max-width: 300px;
  transform: rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
  transform-origin: 80% 50% 0px;
  position: relative;
}
```
![Screen Shot 2021-07-23 at 11.58.23 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/08581762-b4d5-6809-2627-bed4c3bb6f65.png)

なんだか不自然なので、遠近感を加える。perspective の値は適当に。

```style.css
.floatingObject {
  position: relative;
  margin-bottom: 10vh;
  perspective: 600px;
}
```
![Screen Shot 2021-07-23 at 12.00.51 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/fe450d54-766d-40db-3a08-a617af49968c.png)

もう、これでおしまいでも良さそうだが、あとちょっと微調整する。

## 仕上げ
浮きをもうちょっと下げて、影の大きさを調整する。全体的な位置を調整する。カードをちょっと丸くしてカードっぽくする。などの調整を加えた。

```index.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">
  <title>Floating Object</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container">
    <h1 class="headingText">Floating Object</h1>
    <div class="floatingContainer">
      <div class="floatingObject">
        <img class="floatingCard" src="./newyearcard2021.png" alt="">
      </div>
    </div>
  </div>
</body>
</html>
```


```style.css
* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.headingText {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.floatingContainer {
  height: 90vh;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.floatingCard {
  max-width: 300px;
  transform: rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
  transform-origin: 80% 50% 0px;
  position: relative;
  border: 1px solid #fff;
  border-radius: 8px;
}

.floatingObject {
  position: relative;
  margin-bottom: 10vh;
  perspective: 600px;
}
.floatingObject:after {
  content: "";
  position: absolute;
  width: 120%;
  height: 50px;
  top: 100%;
  left: -10%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: -1;
}
```

![Screen Shot 2021-07-23 at 12.12.54 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/d7650ace-16a4-63f2-71c3-40bcc3764534.png)

良いね！
Mac の Safari と Chrome でしか確認していない。実際に使う時は、sass とかで勝手に調整してくれるものと思うので、気にしないことにする。

## おしまい

フロントエンドの開発は（どこまでをフロントエンドと呼ぶかは置いといて）、普段あまりやらないので、こういうデザインが上がってくると、ドキっとする。ベトナムではフロントエンドのスペシャリストって、あんまりいなくて、誰か良い人いないかなーと緩く思っている。