質問編集履歴
1
「あらかじめ指定されていた状態」を少し変更しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
あらかじめ
|
|
1
|
+
あらかじめ、何かのトリガーでJSによって、style.transformが割り当てられている状態で、「画面がクリックされたら、（scaleを維持したまま）45度回転する」という処理を行いたいのですが、同意すればいいでしょうか？
|
|
2
2
|
|
|
3
3
|
以下のコードでは、element.style.transform='rotate(45deg)'を適用した時点でscaleX(0.5)が消えてしまいます。
|
|
4
4
|
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
left: 300px;
|
|
17
17
|
width:200px;
|
|
18
18
|
height:200px;
|
|
19
|
-
transform:scaleX(0.5);
|
|
20
19
|
background-color: red;
|
|
21
20
|
}
|
|
22
21
|
</style>
|
|
@@ -24,6 +23,8 @@
|
|
|
24
23
|
<body>
|
|
25
24
|
<div id='box'></div>
|
|
26
25
|
<script>
|
|
26
|
+
document.getElementById('box').style.transform='scaleX(0.5)'
|
|
27
|
+
|
|
27
28
|
document.addEventListener('click',()=>{
|
|
28
29
|
document.getElementById('box').style.transform='rotate(45deg)'
|
|
29
30
|
})
|
|
@@ -42,4 +43,11 @@
|
|
|
42
43
|
|
|
43
44
|
|
|
44
45
|
|
|
45
|
-
理想↑
|
|
46
|
+
理想↑
|
|
47
|
+
|
|
48
|
+
追記：
|
|
49
|
+
```
|
|
50
|
+
document.getElementById('box').style.transform='scaleX(0.5) rotate(45deg)'
|
|
51
|
+
```
|
|
52
|
+
はあまりやりたくないです。
|
|
53
|
+
というのも、実際には、scaleX とrotateの中身を動的に変更するからです。
|