@BroCodez

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bro Code</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--
        transform = CSS property lets you rotate,
                              scale, skew, or translate an element
    -->

    <div class="box" id="box1">Hi</div>
    <div class="box" id="box2">Hi</div>
    <div class="box" id="box3">Hi</div>
    
    <!-- <img src="Shrek.png"> -->

</body>
</html>

/* style.css */

img{
    transform: translate(200px) scaleX(3) rotate(180deg);
}
.box{
    	border: 5px solid;
	width: 250px;
	height: 250px;
	font-size: 13em;
	text-align: center;
    	transform: translate(50px, 50px) rotate(45deg);
    
    /*
	transform: translateX(50px);
	transform: translateY(50px);
	transform: translate(50px, 50px);
	transform: rotateX(180deg);
	transform: rotateY(180deg);
	transform: rotateZ(180deg);
	transform: scaleX(2);
	transform: scaleY(2);
	transform: scale(2, 0.5);
	transform: skewX(45deg);
	transform: skewY(45deg);
	transform: skew(20deg, 20deg);
    */
}
#box1{
	background:hsl(154, 100%, 69%);
}
#box2{
	background:hsl(0, 100%, 69%);
}
#box3{
	background:hsl(222, 100%, 69%);
}

@StoriesInc-4you

Bro, I recently found your channel and you're the best coding teacher I left a short video teaching this to watch your longer video bro! 🎉🎉

@paolobena

Fantastic

@chrisclassical7

top video, thank you