Questions about transform: scale

HTML & CSS
1

I just made this one, and added some different code to it.

More specifically I added,:
transform: scale(.5); width: 100%; height: 100%;

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; border: 3px solid #0059dd;" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '&lt;svg width=\'100%\' height=\'100%\' style=\'background-color:red;color: #0059dd;transform: scale(.5);\' viewBox=\'0 0 60 100\'&gt;&lt;path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'&gt;&lt;/svg&gt;';
player.play();
} else {
playButton2.innerHTML = '&lt;svg width=\'100%\' height=\'100%\' style=\'background-color:red;color: #0059dd;transform: scale(.5);\' viewBox=\'0 0 85 100\'&gt;&lt;path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'&gt;&lt;/svg&gt;';
player.pause();
}">
  <svg style="background-color:red;transform: scale(.5); width: 100%; height: 100%;" viewBox="0 0 85 100">

    <path fill="currentColor" style="fill:#0059dd;" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

</button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>
2

Did you have a question to ask here, @asasass? What kind of discussion are you looking to generate with your opening post?

1 Like
3

I wanted to know if I’m using this codes in the correct manner:
transform: scale(.5); width: 100%; height: 100%;

4

How come transform: scale(.5); doesn’t work with code 1 like it does with code 2?

Code 1.)

Code 2.)

5

Topics merged.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.