- 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
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
2K+ Views
Use the [attribute=”value”] selector to select elements with a specified attribute and value.You can try to run the following code to implement the CSS [attribute="value"] Selector. Here, we have considered the attribute as rel,ExampleLive Demo a[rel = nofollow] { border: 3px solid orange; } Uber's Business Model Share Market
![Giri Raju](https://www.tutorialspoint.com/assets/profiles/13536/profile/60_72105-1512540773.jpg)
133 Views
To select elements with an attribute, use the CSS [attribute] selector.For example, alt attribute or a target attribute, etc.You can try to run the following code to implement the CSS[attribute] selector,ExampleLive Demo img[alt] { border: 3px solid orange; }
![Jennifer Nicholas](https://www.tutorialspoint.com/assets/profiles/13569/profile/60_88876-1512715262.jpg)
80 Views
Use the perspective-origin property to specify the bottom position of 3D elements.You can try to run the following code to implement the perspective-origin property:ExampleLive Demo .demo1 { position: relative; width: 150px; height: 150px; background-color: yellow; perspective: 80px; margin: 50px; perspective-origin: left; } .demo2 { position: absolute; padding: 20px; background-color: orange; transform-style: preserve-3d; transform: rotateX(45deg); } Rotation Demo Demo
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
45 Views
Use the CSS perspective property to specify the perspective on how 3D elements are viewed.You can try to run the following code to achieve thisExampleLive Demo .demo1 { position: relative; width: 150px; height: 150px; background-color: yellow; perspective: 80px; margin: 50px; } .demo2 { position: absolute; padding: 20px; background-color: orange; transform-style: preserve-3d; transform: rotateX(45deg); } Rotation Demo Demo
![radhakrishna](https://www.tutorialspoint.com/assets/profiles/13544/profile/60_40618-1512640354.jpg)
108 Views
To specify the perspective on how 3D elements are viewed, use the CSS perspective property.You can try to run the following code to work with perspective property:ExampleLive Demo .demo1 { position: relative; width: 150px; height: 150px; background-color: yellow; perspective: 80px; margin: 50px; } .demo2 { position: absolute; padding: 20px; background-color: orange; transform-style: preserve-3d; transform: rotateX(45deg); } Rotation Demo Demo
![Vrundesha Joshi](https://www.tutorialspoint.com/assets/profiles/13566/profile/60_88163-1512715024.jpg)
111 Views
To specify how nested elements are rendered in 3D space, use the transform-style property in CSS.You can try to run the following code to implement the transform-style property:ExampleLive Demo .demo1 { width: 300px; height: 300px; background-color: yellow; } .demo2 { width: 200px; height: 200px; background-color: orange; } .demo3 { width: 100px; height: 100px; background-color: blue; transform: rotate(10deg); transform-origin: 30% 40%; transform-style: preserve-3d; } Rotation Demo Demo Demo
![varun](https://www.tutorialspoint.com/assets/profiles/13559/profile/60_29674-1512637943.jpg)
201 Views
To change the position on transformed elements with CSS, use the transform-origin property.You can try to run the following code to change the position:ExampleLive Demo .demo1 { width: 300px; height: 300px; background-color: yellow; } .demo2 { width: 200px; height: 200px; background-color: orange; } .demo3 { width: 100px; height: 100px; background-color: blue; transform: rotate(10deg); transform-origin: 30% 40%; } Rotation Demo Demo Demo
![Rishi Rathor](https://www.tutorialspoint.com/assets/profiles/13563/profile/60_89283-1512714754.jpg)
153 Views
Use the CSS background-origin property to set the content-box value. With the content-box value, the background image begins from the upper left corner of the content.You can try to run the following code to implement the content-box value:ExampleLive Demo #value1 { border: 3px solid blue; padding: 30px; background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg); background-repeat: no-repeat; background-origin: padding-box; } ... Read More
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
116 Views
Use the transform-origin property to change the position on transformed elements with CSS.ExampleYou can try to run the following code to learn how to work with transform-origin property with CSSLive Demo .demo1 { width: 300px; height: 300px; background-color: yellow; } .demo2 { width: 200px; height: 200px; background-color: orange; } .demo3 { width: 100px; height: 100px; background-color: blue; transform: rotate(10deg); transform-origin: 30% 40%; } Rotation Demo Demo Demo
![vanithasree](https://www.tutorialspoint.com/assets/profiles/13547/profile/60_85216-1512542720.jpg)
113 Views
Use the animation-direction property to run animation in an alternate direction. The property is used with the alternate animation value to achieve this.ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: 3; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }