Front End Technology Articles - Page 637 of 860

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 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                                

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;             }          }                        

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;             }          }                        

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 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.