Tuesday, January 29, 2019
WHAT I DISCOVERED ABOUT CSS3 TRANSFORM AND THE TRANSFORM-ORIGIN PROPERTY
Hi, welcome to our final lesson on CSS course, in this lesson, I will take you by hand and walk you through all the various things I discovered about CSS3 transform and the transform-origin property. In our next lesson, we’ll gallantly march into JavaScript Tutorial Course. Howbeit, I’m undoubted we are making progress.
As I've stated earlier, today’s lesson anchors on how CSS 3 transforms and transform-origin property works. Therefore, It will be pertinent if we categorically overview each of them.
1. CSS 3 transform
CSS 3 transform enables web designers to scale, rotate, skew or translate an element on a web page. This means that you can change the shape, position, style, and size of an element using CSS 3 transform which supports 2D and 3D transformation.
Open your text editor let us consider some examples.
Firstly, I’d like you to observe how this rectangle below looks without applying CSS 3 transform on it, and secondly, how it looks after applying CSS 3 transform.
a) Without Transform
HTML
<div>Without Transform</div>
CSS
div{
width: 300;
height: 150;
margin-top: 60px;
background-color: blue;
text-align: center;
color: white;
font-size: x-large;
}
REFERENCE THE CSS IN YOUR HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT IT WILL LOOK LIKE THIS!
b) With Transform
HTML
<div>Transform</div>
CSS
div{
width: 300;
height: 150;
margin-top: 60px;
background-color: blue;
text-align: center;
color: white;
font-size: x-large;
}
REFERENCE IT IN HTML, SAVE AND THEN OPEN IT, IT WILL LOOK LIKE THIS
2. Transform-origin property
Transform-origin property is used to change the axis which the transformed element is positioned. The transform-origin usually have two values; one for x-axis and the other for y-axis. The default value for this property is 50% 50% which is synonymous to the center of the element. 0% 0% corresponds to top left of the element while 100% 100% is the same as the bottom right. You can actually change all these values to explore more. Howbeit, it is pertinent to state here that transform-origin cannot exist on its own without transform property. In other words, the transform-origin property must be used together with CSS 3 transform. Let us see an example to water down the above points.
HTML
<div>
<div class="empty-div">
<div class="blue-div">
</div>
CSS
div.empty-div{
position: relative;
height: 150px;
width: 150px;
margin: 40px;
padding: 15px;
border: 2px dotted black;
}
div.blue-div{
padding: 80px;
position: absolute;
background-color: blue;
border: 2px solid red;
transform: rotate(15deg);
transform-origin: 25% 75%;
}
REFERENCE THE CSS IN HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
You can change the numbers or values to explore more amazing features in our subject of discourse. This will help you learn more. We will be moving to JavaScript in our next lesson. See you there.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment