背景のみを回転させる方法について

前提・実現したいこと

背景だけ回転させて、文字は回転しないアニメーションをJSを用いて作成したいのですが、以下のソースコードだと文字ごと回転してしまいます。
どのようにすれば、背景だけを回転させることができるでしょうか？

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScript Practice</title> <style> body { display: flex; flex-wrap: wrap; } .box { width: 100px; height: 100px; background: skyblue; cursor: pointer; transition: 0.8s; margin: 0 8px 8px 0; text-align: center; line-height: 100px; } .circle { background: pink; border-radius: 50%; transform: rotate(180deg); } </style> </head> <body> <script> 'use strict'; for (let i = 0; i < 100; i++) { const div = document.createElement('div'); div.classList.add('box'); div.textContent = i; div.addEventListener('click', () => { div.classList.toggle('circle'); }); document.body.appendChild(div); } </script> </body> </html>

K_3578

2021/04/14 08:50

ソースコードはMarkDownの<code>ブロック内に貼り付けてください。 ```言語名(HTML,CSS等) ソースコード ``` 上記のようにしてみてください。

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

回答2件

ベストアンサー

背景は ::before疑似要素にするとかでどうでしょう。

css
1body {
2  display: flex;
3  flex-wrap: wrap;
4}
5.box {
6  position: relative; 
7  width: 100px;
8  height: 100px;
9  cursor: pointer;
10  margin: 0 8px 8px 0;
11  text-align: center;
12  line-height: 100px;
13}
14.box::before {
15  content: "";
16  display: block;
17  position: absolute;
18  width: 100px;
19  height: 100px;
20  top: 0;
21  background: skyblue;
22  transition: 0.8s;
23  z-index:-1;
24}
25.circle.box::before {
26  background: pink;
27  border-radius: 50%;
28  transform: rotate(180deg);
29}

投稿2021/04/14 10:23

編集2021/04/14 10:31

hatena19

総合スコア33782

AltF4

2021/04/15 05:59

ありがとうございました！

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

たとえば

div.textContent = i; 
↓↓↓
div.innerHTML = `<div>${i}</div>`;

として、二重divにしておいて

css
1.circle{
2background: pink;
3border-radius: 50%;
4transition: 0.8s;
5transform: rotate(180deg);
6}
7.circle div{
8transition: 0.8s;
9transform: rotate(-180deg);
10}