rotateプロパティ

rotateを使用するときの軸の考え方がいまいちわかりません。初期値はtransform-originは50% 50%のはずなのに、右側を軸にして動いています。0 50にすると真ん中が軸になって回転します。これも本来なら左側を軸にすると思うのですが、、、　質問をまとめると、transform-originを使う意味がわからないです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/style.css">
7    <link rel="stylesheet" href="css/resetのコピー2.css">
8    <title>ドロワーメニュー</title>
9    <script src="js/script.js"></script>
10</head>
11<body>
12<header>
13    <a class="menu-button" id="menu-button">
14        <div></div>
15        <div></div>
16        <div></div>
17    </a>
18</header>
19</body>
20</html>

css
1a {
2  text-decoration: none;
3}
4
5.menu-button {
6  display: block;
7  height: 80px;
8  width: 80px;
9  background: pink;
10  position: fixed;
11  top: 0;
12  right: 0;
13}
14
15.menu-button div {
16  height: 1px;
17  width: 60%;
18  background: black;
19  position: absolute;
20  top: 50%;
21  left: 50%;
22  -webkit-transform: translate(-50%, -50%);
23          transform: translate(-50%, -50%);
24  -webkit-transition: 0.3s;
25  transition: 0.3s;
26}
27
28.menu-button div:nth-of-type(1) {
29  -webkit-transform: translate(-50%, -15px);
30          transform: translate(-50%, -15px);
31}
32
33.menu-button div:nth-of-type(3) {
34  -webkit-transform: translate(-50%, 15px);
35          transform: translate(-50%, 15px);
36}
37
38.active div:nth-of-type(1) {
39  -webkit-transform: rotate(45deg) translate(-50%, 0);
40          transform: rotate(45deg) translate(-50%, 0);
41  -webkit-transform-origin: 0% 50%;
42          transform-origin: 0% 50%;
43}
44
45.active div:nth-of-type(2) {
46  opacity: 0;
47}
48
49.active div:nth-of-type(3) {
50  -webkit-transform: rotate(-45deg) translate(-50%, 0);
51          transform: rotate(-45deg) translate(-50%, 0);
52  -webkit-transform-origin: 0% 50%;
53          transform-origin: 0% 50%;
54}

javascript
1document.addEventListener('DOMContentLoaded', function() {
2    document.getElementById("menu-button").addEventListener("click", function() {
3        this.classList.toggle("active");
4    })
5});

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="/css/style.css">
7    <title>rotate</title>
8</head>
9<body>
10    <div class="all">
11        <div id="all1"></div>
12    </div>
13    <div class="all" style=" margin-top: 50px;">
14        <div id="all2"></div>
15    </div>
16</body>
17</html>

css
1.all {
2    height: 200px;
3    width: 200px;
4    background: gray;
5    text-align: center;
6    margin: 0 auto;
7}
8
9#all1 {
10    height: 100px;
11    width: 100px;
12    background: green;
13    margin-top: 50px;
14    display: inline-block;
15    transform: translate(30px, 0) rotate(45deg);
16}
17
18#all2 {
19    height: 100px;
20    width: 100px;
21    background: red;
22    margin-top: 50px;
23    display: inline-block;
24    transform:rotate(45deg) translate(30px, 0);
25}

m.ts10806

2020/12/28 21:21

自身で書いたコードではないのでしょうか。出典明示してください。

aoi68

2020/12/29 07:44

https://youtu.be/nzg9cIB1GoU この動画で使われていた物です。

行動規範の内容に同意します

回答1件

ベストアンサー

transformに複数の効果を適用した場合、右から左の順で適用されます（MDN）。

そのため、rotate(45deg) translate(-50%, 0);は、水平移動してから回転、ということになります。

投稿2020/12/28 23:19

maisumakun

総合スコア145184

aoi68

2020/12/29 07:50

回答ありがとうございます。自分でも比較するために比較用コードを書いてみたのですが、.all2のrotateの回転軸はどこになっているのでしょうか。すいませんが教えてください

aoi68

2020/12/29 08:18

いろいろ試してもしかしたらと思ったのですが、translateで水平移動する前の要素の軸を基準として回転しているように見えたのですが、どうなのでしょうか？例えばtransform-origin: left top;という指定を付け加えたら水平移動する前の段階での要素の左上を中心として回転するみたいな感じです。