- 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
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
1K+ Views
Use the translate(x,y) method to transform the element along with x-axis and y-axis.Let us see the syntaxtranslate(x,y)Here, x is a length representing the x-coordinate of the translating vector.y is a length representing the ordinate of the translating vectorLet us see an examplediv { width: 50px; height: 50px; background-color: orange; } .trans { transform: translate(20px); background-color: black; }
![Priya Pallavi](https://www.tutorialspoint.com/assets/profiles/13562/profile/60_91320-1512544134.jpg)
69 Views
The multi-column rule-style property is used to specify the style rule for the column. You can try to run the following code to implement rule-style property using CSS −ExampleLive Demo .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ ... Read More
![Priya Pallavi](https://www.tutorialspoint.com/assets/profiles/13562/profile/60_91320-1512544134.jpg)
71 Views
The multi-column rule-width property is used to specify the column width. You can try to run the following code to implement rule-width property using CSS:ExampleLive Demo .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: 40px; ... Read More
![radhakrishna](https://www.tutorialspoint.com/assets/profiles/13544/profile/60_40618-1512640354.jpg)
44 Views
You can try to run the following code to matrix transform in another direction with CSS:ExampleLive Demo div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv2 { /* IE 9 */ -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */ -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */ transform: matrix(1, 0, 0.5, 1, 150, 0); } Tutorialspoint.com Tutorialspoint.com Output
![Srinivas Gorla](https://www.tutorialspoint.com/assets/profiles/13556/profile/60_78057-1512712331.jpg)
206 Views
You can try to run the following code to rotate div with matrix transforms using CSS:ExampleLive Demo div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv1 { /* IE 9 */ -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */ transform: matrix(1, -0.3, 0, 1, 0, 0); } Welcome to my website. Welcome to my website. Output
![Ankitha Reddy](https://www.tutorialspoint.com/assets/profiles/13550/profile/60_73963-1512711511.jpg)
476 Views
You can try to run the following code to rotate div to -20 degrees angle with CSS − Example Live Demo div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(-20deg); /* Safari */ -webkit-transform: rotate(-20deg); /* Standard syntax */ transform: rotate(-20deg); } Tutorials point.com. Tutorials point.com Output
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
90 Views
2D transforms are used to re-change the element structure as translate, rotate, scale, and skew.The following table has contained common values that are used in 2D transformsS.NoValues & Description1matrix(n, n, n, n, n, n)Used to defines matrix transforms with six values2translate(x, y)Used to transforms the element along with x-axis and y-axis3translateX(n)Used to transforms the element along with x-axis4translateY(n)Used to transforms the element along with y-axis5scale(x, y)Used to change the width and height of element6scaleX(n)Used to change the width of element7scaleY(n)Used to change the height of element8rotate(angle)Used to rotate the element based on an angle9skewX(angle)Used to defines skew transforms along with ... Read More
![vanithasree](https://www.tutorialspoint.com/assets/profiles/13547/profile/60_85216-1512542720.jpg)
90 Views
Web fonts are used to allow the fonts in CSS, which are not installed on a local system. ExampleThe following code shows the sample code of font face:Live Demo @font-face { font-family: myFirstFont; src: url(/css/font/SansationLight.woff); } div { font-family: myFirstFont; } This is the example of font face with CSS3. Original Text :This is the example of font face with CSS3. Output
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
689 Views
Use the word-wrap property to break the line and wrap onto next line. You can try to run the following code to implement a word-wrap property in CSSExampleLive Demo div { width: 200px; border: 2px solid #000000; } div.b { word-wrap: break-word; } word-wrap: break-word property ThisisdemotextThisisdemotext: thisisaveryveryveryveryveryverylongword. The long word wraps to the next line. Output
![usharani](https://www.tutorialspoint.com/assets/profiles/13564/profile/60_32161-1512638316.jpg)
62 Views
The text-overflow property is used to determine how overflowed content that is not displayed is signaled to users with CSS.ExampleYou can try to run the following code to implement a text-overflow property in CSS:Live Demo p.text1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.text2 { ... Read More