- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Priya Pallavi](https://www.tutorialspoint.com/assets/profiles/13562/profile/60_91320-1512544134.jpg)
108 Views
You can try to run the following code to rotate div with skew x-axis using CSS −ExampleLive Demo div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewX(20deg); /* Safari */ -webkit-transform: skewX(20deg); /* Standard syntax */ transform: skewX(20deg); } Qries.com Qries.com
![radhakrishna](https://www.tutorialspoint.com/assets/profiles/13544/profile/60_40618-1512640354.jpg)
128 Views
The scaleX(x) method is used to scale transform the element using x-axis.Let us see the syntax −scaleX(x)Here, x is a number representing the scaling factor to apply on the abscissa of each point of the element.Let us see an example −div { width: 60px; height: 60px; background-color: yellow; } .scaled { transform: scaleX(0.5); background-color: black; }
![Srinivas Gorla](https://www.tutorialspoint.com/assets/profiles/13556/profile/60_78057-1512712331.jpg)
240 Views
The scaleY(y) method is used to scale transform the element using y-axis.Let us see the syntax −scaleY(y)Here, y is a number representing the scaling factor to apply on the ordinate of each point of the element.Let us see an example −div { width: 60px; height: 60px; background-color: yellow; } .scaled { transform: scaleY(0.5); background-color: black; }
![usharani](https://www.tutorialspoint.com/assets/profiles/13564/profile/60_32161-1512638316.jpg)
53 Views
To create rotate out up right animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } Reload page function myFunction() { location.reload(); }
![Abhinanda Shri](https://www.tutorialspoint.com/assets/profiles/13552/profile/60_73264-1512711555.jpg)
71 Views
To create rotate out up left animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } Reload page function myFunction() { location.reload(); }
![Giri Raju](https://www.tutorialspoint.com/assets/profiles/13536/profile/60_72105-1512540773.jpg)
64 Views
To create rotate out downright animation effect with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } Reload page function myFunction() { location.reload(); }
![vanithasree](https://www.tutorialspoint.com/assets/profiles/13547/profile/60_85216-1512542720.jpg)
115 Views
The CSS border-mage-source property is used to set the image path. You can try to run the following code to implement the border-image-source property:ExampleLive Demo #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/css/images/border.png); border-image-repeat: round; border-image-slice: 50; } This is image border example.
![Srinivas Gorla](https://www.tutorialspoint.com/assets/profiles/13556/profile/60_78057-1512712331.jpg)
140 Views
CSS has several units for different units such as width, margin, padding, font-size, border-width, etc. The length indicates by using numerical value followed by length units such as px, dp, em, etc. It does not allow white spaces in between numerical values and length units.Length units divided as follows:relative unitsabsoluteAbsolute unitsUnitsAbbreviationPixelsPxPointsPtInchesInCentimetersCmPicasPcRelative UnitsIn relative units, the length value is fixed and it appears the exact size of the elementUnitsAbbreviationPercent%EmEmExExRoot emRemViewport widthVwViewport widthVhViewport widthVmCharacterChGridGd