多列 column-rule 属性用于指定规则的数量。您可以尝试运行以下代码在 CSS3 中实现 column-rule 属性：示例实时演示                    .multi {             /* 列计数属性 */             -webkit-column-count: 4;             -moz-column-count: 4;             column-count: 4;                         /* 列间距属性 */             -webkit-column-gap: 40px; ... 阅读更多

CSS3 支持多列来排列文本，使其像报纸结构一样。一些最常用的多列属性如下所示：值描述column-count用于计算元素应划分的列数column-fill用于决定如何填充列column-gap用于决定列之间的间距column-rule用于指定规则的数量rule-color用于指定列规则颜色rule-style用于指定列的样式规则rule-width用于指定宽度column-span用于指定列之间的跨度

您可以尝试运行以下代码，使用 CSS3 实现带关键帧的向左移动动画示例实时演示                    h1 {             -moz-animation-duration: 3s;             -webkit-animation-duration: 3s;             -moz-animation-name: slidein;             -webkit-animation-name: slidein;          }          @-moz-keyframes slidein {             from {                margin-left:100%;                width:300%             }             75% {                font-size:300%;                margin-left:25%;                width:150%;             }             to {                margin-left:0%;                width:100%;             }          }          @-webkit-keyframes slidein {             from {                margin-left:100%;                width:300%             }             75% {                font-size:300%;                margin-left:25%;                width:150%;             }             to {                margin-left:0%;                width:100%;             }          }                     Tutorials Point       这是一个带额外关键帧的向左移动动画示例，用于更改文本。       重新加载页面                function myFunction() {             location.reload();          }          

以下示例显示了使用关键帧语法的动画的高度、宽度、颜色、名称和持续时间：示例实时演示                    h1 {             -moz-animation-duration: 3s;             -webkit-animation-duration: 3s;             -moz-animation-name: slidein;             -webkit-animation-name: slidein;          }          @-moz-keyframes slidein {             from {                margin-left:100%; width:300%             }             to {                margin-left:0%; width:100%;             }          }          @-webkit-keyframes slidein {             from {                margin-left:100%; width:300%             }             to {                margin-left:0%; width:100%;             }           }                     Tutorials Point       这是一个向左移动动画的示例。       重新加载页面       function myFunction() { location.reload(); }    

您可以尝试运行以下代码，使用 CSS 定义沿 Y 轴的倾斜变换：示例实时演示                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#skewDiv {             /* IE 9 */             -ms-transform: skewY(20deg);                         /* Safari */             -webkit-transform: skewY(20deg);                         /* 标准语法 */             transform: skewY(20deg);          }                              Tutorials point.com.                      Tutorials point.com           输出

您可以尝试运行以下代码，使用 CSS 实现沿 X 轴的倾斜变换：示例实时演示                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#skewDiv {             /* IE 9 */             -ms-transform: skewX(20deg);                        /* Safari */            - webkit-transform: skewX(20deg);                        /* 标准语法 */            transform: skewX(20deg);         }                              Tutorials point.com.                      Tutorials point.com           输出

让我们学习如何基于角度旋转元素示例实时演示                    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);                         /* 标准语法 */             transform: rotate(20deg);          }                              Tutorials point.com.                      Tutorials point.com           输出

使用 scaleY() 方法通过 CSS 更改元素的高度。让我们看看语法 −scaleY(n);这里，n 是一个表示缩放因子的数字。让我们看一个例子 −div {    width: 40px;    height: 50px;    background-color: black; } .myScaled {    transform: scaleY(0.9);    background-color: orange; }

使用 translateY(n) 方法沿 y 轴变换元素。让我们看看语法：translateY(n)这里，n 是一个表示平移向量的横坐标的长度。示例让我们看一个例子 −div {    width: 50px;    height: 50px;    background-color: black; } .trans {    transform: translateY(20px);    background-color: orange; }

使用 translateX(n) 方法沿 x 轴变换元素。让我们看看语法translateX(n)这里，n 是一个表示平移向量的横坐标的长度。让我们看一个例子div {    width: 50px;    height: 50px;    background-color: black; } .trans {    transform: translateX(20px);    background-color: orange; }