質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

561閲覧

JavaScrript transformで回転させるが思うようにいかない

norikazux

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/10/19 03:56

編集2021/10/19 03:57

プログレスバーのようなものを作っていて、それの縦バージョンを作っています
下記を実行すると上から下にゲージが溜まるような動作になるのですが
rotateを使って下から上に溜まるように見えるにはどうしたらいいのでしょうか?

<style> body,html{ height:100%; } .bar{ height: 100%; animation: bar-animation 1 2s; background: #0091EA; } @keyframes bar-animation{ 0%{ height: 0%; } 100%{ height: 100%; } } </style> <script> window.onload=function(){ div=document.createElement("div"); div.style.width="5%"; div.style.height="100%"; document.body.append(div); div2=document.createElement("div"); div2.style.height="100%"; div2.style.maxHeight="70%"; div2.classList.add("bar"); div2.style.transform="rotate(180deg)"; div.appendChild(div2); } </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

回転じゃなくてbottomを固定すればよいのでは?
wrap要素にも属性が必要です

CSS

1<style> 2body,html{ 3 height:100%; 4} 5.bar{ 6 bottom:30%; 7 position:absolute; 8 width:100%; 9 animation: bar-animation 1 2s ; 10 background: #0091EA; 11animation-fill-mode:forwards; 12} 13@keyframes bar-animation{ 14 0%{ 15 height: 0%; 16 } 17 100%{ 18 height: 100%; 19 } 20} 21</style> 22 23<script> 24window.onload=function(){ 25div=document.createElement("div"); 26div.style.width="5%"; 27div.style.height="100%"; 28div.style.position="relative"; 29document.body.append(div); 30 31div2=document.createElement("div"); 32div2.classList.add("bar"); 33div.appendChild(div2); 34} 35</script>

投稿2021/10/19 04:19

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

div2ではなくdivrotate()をかけるのが意図なんじゃないでしょうか。

投稿2021/10/19 04:16

int32_t

総合スコア21695

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問