<!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%); }
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! 🎉🎉
Fantastic
top video, thank you
Thank you
@BroCodez