 Hello everyone, my name is Samprit Patel, assistant professor, department of computer science and engineering, Waltons Institute of Technology, Sholapur. Today, we will be learning about transformations in cascading slide style sheets. At the end of this video, you will be understanding how transformations work using CSS. You will be able to apply animations 2D and 3D transformations to your HTML elements using CSS. The content that we will be covering is animations, 2D transformation and 3D transformation through this video. So, first is animation and animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animations, you must first specify some keyframes for the animations. Keyframe holds what style the element will have a certain time. So keyframe or keyframe rules is an important part of animations. When you specify style sheet inside a keyframe rule, an animation will gradually change from a current style to a new style at certain times. So the example for keyframe is at the red keyframe example into brackets. The background color it changed from red to yellow. So the key word is at the red keyframes. The example is the name of the keyframe and into the brackets. Those are the properties or the animations that you require for an element. That is from changing an element color from red to yellow. Now there are some properties that you can use to animate a particular element. The first one is animation. It is a shorthand property for setting all the animation properties. So you can set all the animation properties using space in an animation. Like animation delay, animation direction, its duration, its iteration count and so on. So if you want to apply specific animations, you can use animation delay for setting a delay of start of an animation. Animation direction which specifies whether an animation should be played forward, backward or in alternate cycles. Animation duration. The duration is given in numbers and seconds. For example two seconds you can give the duration of an animation. It specifies how long the animation should take place to complete one cycle. Animation field mode. It specifies the style of an element when the animation is not playing. Before it starts, after it ends or both. Animation iteration count. This specifies for how many times the animation should take place for a single element. Animation name. Specifies the name of the keyframe animation. The one with an example in above. At the keyframe we are given the animation name as example. Animation play state specifies whether the animation is running or paused. An animation timing function which specifies the speed curve of an animation. Now moving forward to 2D transformations. 2D transformations are used to re-change the element structure. 2D transformation gives you more freedom to decorate and animate style components or HTML components. 2D transforms contains some basic functions like translate, rotate, scale, skew and matrix. So we will see all these elements have some values to be passed. We will see and elaborate. So translate function. We can use translate x and y. That is one of the function taking two values of x axis and y axis. Then translate x. That is when you only want to change the x axis of the given element and the number. Similarly, the third one is translate y. That is a bit of a mistake. That is translate y and n. So second property is rotate. Rotate has you have to pass a number with a degree. So how much degree you want to change the angle of an element. After that scale. Scale is similar to translate. It has a scale function which takes two parameters x and y. Similarly with a single parameter you can scale x and you can scale y. You can use skew property to tilt an element. So skew x. That is if you want to tilt with an axis angle and skew y. If you want to tilt with an y axis angle. Now matrix is the function which takes six values which takes six numbers and transforms the specific element in six directions. So these are the syntaxes and examples. So see for translate x and y. The particular element has been translated or transformed from 50 pixels to 100 pixels. So 50 is x axis. The difference of x axis and the element will change from y axis to 100 pixels. Second is rotate with a single value n. That is the element is rotated from 20 degrees. The third is scale. It gives the scaling of 2 and 4 for x and y axis respectively. Skew x and skew y. So it skews the particular element by 20-20 degrees at x axis and y axis. Pause the video and try to solve this particular problem. Write the CSS code to rotate an element clockwise from its original position. Now we will see about it. So this is the style sheet where we have defined an element. So how it should look? It should have an inline block with a background color of a given hash code. This hash code is for shade of blue. Its height is 100 pixels and width is 100 pixels. So basically it would be a square. Its font size is 1 pixel. Padding we have given between all the elements is 1 pixel. The color we have used for font is white. Basically we won't be using font but still we have been giving the properties because if in case we use. After that we have left some margin of 5 pixels to right and left. Now we have given an animation to rotate that particular object by 30 degrees. So we have used transform colon rotate. So this is the syntax to apply the 2D transformation. The opacity we have given to the element is 0.7. Now we are using a keyframe with key name role which defines the rotate of 0 degrees when it is 0%. When it is at 100% it should be at 360 degrees. So likewise it will rotate and this is the styling for its body. So I will run this particular file. Now you can see these are the squares with 100 width and 100 pixel of height and they are rotating at 360 degrees. So when it is at 0% it is rotating at 0 degrees and when it is at 100% it is rotating to 360 degrees. So similarly we will see a simple example. Now you can also give from and to to a particular animation. You can also give so I will run this file for you you will understand. This color changed from red to green and it came back to red because it was its default value. Now we can also give it like at 0% this particular element will have red. Just copy will take at 25% this will be yellow at 50% this will be say orange and at 100% it will be green and it will change back to red. So we will just increase the duration we will give it as 4 seconds so you can understand when the color is changing. See now the color is changing with a slow speed. So this is the particular animation duration I was speaking about. The animation name is example because the key frame or the animation that we have defined is in the key frame example. So this is the particular example for 2D transformations and animation moving forward to 3D transformation. 3D transformation is similar to what 2D transformation is. It will have one extra element that is TZ which defines the Z axis of the element. So it will have translate 3D this is the syntax with the parameters TX, TY and TZ. Similarly scale 3D to scale element and to rotate an element in a 3 dimensional. So this will have 4 parameters that is X axis, Y axis and Z axis with a given angle to rotate. So these are some references that I have used to make this particular PPT or get this information. Thank you.