使用 [attribute=”value”] 选择器来选择具有指定属性和值的元素。您可以尝试运行以下代码来实现 CSS [attribute="value"] 选择器。这里，我们将属性视为 rel，示例在线演示          a[rel = nofollow] {           border: 3px solid orange;        }           Uber 的商业模式         股市    

要选择具有属性的元素，请使用 CSS [attribute] 选择器。例如，alt 属性或 target 属性等。您可以尝试运行以下代码来实现 CSS [attribute] 选择器，示例在线演示          img[alt] {           border: 3px solid orange;        }                  

使用 perspective-origin 属性来指定 3D 元素的底部位置。您可以尝试运行以下代码来实现 perspective-origin 属性：示例在线演示           .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);        }             旋转         演示        演示        

使用 CSS perspective 属性来指定查看 3D 元素的视角。您可以尝试运行以下代码来实现此功能示例在线演示           .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);        }               旋转         演示        演示                

要指定查看 3D 元素的视角，请使用 CSS perspective 属性。您可以尝试运行以下代码来使用 perspective 属性：示例在线演示           .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);        }             旋转         演示        演示        

要指定如何在 3D 空间中呈现嵌套元素，请在 CSS 中使用 transform-style 属性。您可以尝试运行以下代码来实现 transform-style 属性：示例在线演示           .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;        }               旋转         演示        演示                演示                      

要使用 CSS 更改已转换元素的位置，请使用 transform-origin 属性。您可以尝试运行以下代码来更改位置：示例在线演示           .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%;        }             旋转         演示        演示                演示                      

使用 CSS background-origin 属性设置 content-box 值。使用 content-box 值，背景图像从内容的左上角开始。您可以尝试运行以下代码来实现 content-box 值：示例在线演示           #value1 {           border: 3px solid blue;           padding: 30px;           background: url(https://tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);           background-repeat: no-repeat;           background-origin: padding-box;        }   ... 阅读更多

使用 CSS 中的 transform-origin 属性来更改已转换元素的位置。示例您可以尝试运行以下代码来学习如何使用 CSS 中的 transform-origin 属性在线演示                    .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%;          }                     旋转       演示          演示                            演示                                

使用 animation-direction 属性以交替方向运行动画。此属性与 alternate 动画值一起使用来实现此目的。示例在线演示                    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;             }          }