多列 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   这是一个向左移动动画的示例。

您可以尝试运行以下代码，使用 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; }