Learn CSS transformations in 9 minutes! 🔄

preview_player
Показать описание
#css #course #tutorial

CSS transform translate scale rotate skew tutorial example explained
  1. Bro Code
  2. CSS transform
  3. CSS translate
  4. CSS rotate
  5. CSS scale
  6. CSS skew
Рекомендации по теме
Learn CSS transformations 0:09:01

Learn CSS transformations in 9 minutes! 🔄

Learn CSS Transform 0:14:37

Learn CSS Transform In 15 Minutes

Learn CSS transform 0:04:09

Learn CSS transform in 4 minutes 🔄

Learn CSS Animations 0:08:41

Learn CSS Animations in 9 Minutes

Master CSS transforms 0:04:11

Master CSS transforms and perspective - Explained Visually

Learn CSS height 0:06:54

Learn CSS height and width in 6 minutes! 📏

Learn CSS Animation 0:15:33

Learn CSS Animation In 15 Minutes

CSS transform translate 0:00:15

CSS transform translate

30-Day CSS Challenge: 0:01:00

30-Day CSS Challenge: Day 29 - Creating heart using CSS | Learn CSS from Scratch #coding #css

#30 CSS Transform 0:07:41

#30 CSS Transform Property - CSS Full Tutorial

Transform scale in 0:00:10

Transform scale in 9 seconds | CSS explained

CSS Transform Properties 0:00:15

CSS Transform Properties | CSS Transform Property Explained with Infographic Animation #css #coding

CSS website layout 0:09:28

CSS website layout in 9 minutes! 🗺️

CSS Transform Is 0:07:22

CSS Transform Is Dead! Use This Instead

CSS transform property 0:00:14

CSS transform property #css#coding #webdesign #webdevelopment #programming #cssanimation #css3

Learn CSS animations 0:15:19

Learn CSS animations in 15 minutes! 🎬

Learn CSS Grid 0:00:24

Learn CSS Grid Column and CSS Grid Row in 24 Seconds

Learn CSS in 1:00:00

Learn CSS in 1 hour 🎨

CSS Animation Tutorial 0:06:26

CSS Animation Tutorial #9 - Animation Shorthand

CSS Transform Property 0:04:49

CSS Transform Property in 5 Minutes

html and css 0:00:41

html and css 3d disigning #shorts#html codewithharry#pytho

Transform, Translate, Scale, 0:03:23

Transform, Translate, Scale, and Rotate – What's new in Tailwind CSS

CSS 2D and 0:12:06

CSS 2D and 3D Transforms | 2D and 3D Transformation in CSS | CSS Tutorial for Beginners | SimpliCode

Image Hover Animation 0:00:22

Image Hover Animation in HTML & CSS

Комментарии
Автор

<!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%);
}

BroCodez
Автор

Your baby steps are so helpful. Thanks.

StopWhining
Автор

learn a lot from it, Thank you Bro code!

deriver
Автор

you are really great.
Your way of teaching is just 👌

mdshahriarsiamshuvo
Автор

this playlist was really helpful, pls can you do a short course on responsive web design using css.

ejemighayeoghenemaro
Автор

Hi I want to know how to import avaya and remote desktop programs from my Acer laptop to my ipad. Please help thanks

antoniosandoval