How can I magnify the screen with the following code?
.drawing-board {
width: 25%;
height: 25%;
background-color: black;
position: relative;
/* transform: scale(2, 2); */
}
.drawing-board .box-1 {
width: 20px;
height: 20px;
background-color: yellow;
position: absolute;
left: 90px;
top: 90px;
transform: scale(2, 2);
}
.drawing-board .box-2 {
width: 20px;
height: 20px;
background-color: lime;
position: absolute;
left: 30px;
top: 30px;
transform: scale(2, 2);
}<div class="drawing-board">
<div class="box-1"></div>
<div class="box-2"></div>
</div>Initially, I assumed that using transform: scale() on all elements would enlarge them
Can you provide any examples demonstrating this concept?