Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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
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
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
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
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; } }
Use the CSS background-origin property to set the padding-box value. With the padding-box value, the background image begins from the upper left corner of the padding edge.You can try to run the following code to implement the padding-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
To display the overflowed content while hovering over elements, you can try to run the following code:ExampleLive Demo div.demo { white-space: nowrap; width: 180px; overflow: hidden; border: 2px solid blue; } div.demo:hover { text-overflow: inherit; overflow: visible; } Hover to see the complete text below: Demo Text that will hide in this box.
Use the animation-direction property to run animation in reverse direction. The property is used with the reverse animation value to achieve this.ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: reverse; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
To add a blur effect to the shadow, use the box-shadow property.You can try to run the following code to add blur effectExampleLive Demo h2 { box-shadow: 10px 10px 7px green; height: 50px; background-color: yellow; } Heading Two Above heading has shadow.
Pseudo class is to show different state of an element or a css selector. visited pseudo class is to show that the link is already visited.This pseudo class is mostly being associated with link.Syntaxa:visited { color:green;}Let's check the actual usage of :visited pseudo class with different scenarios, as follows -Example Live Demo a:visited { color:green;} Click here to learn ExplanationWhen you first time see the link it will be shown with normal link color (Blue) and the link will turn green if this link has been visited once.Example Live Demo ... Read More