Css3新增的特性（2）

六 .CSS3 转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

（一）2D 转换

2D变换方法：

• translate() 【根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动】eg:{transform: translate(50px,100px)}
• rotate() 【在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。】eg:{transform: rotate(30deg);}
• scale() 【该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数】eg:{transform: scale(2,3)}
• skew() 【包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。】eg:{transform: skew(30deg,20deg);}

 

　　语法：transform:skew(<angle> [,<angle>]);

 

　　包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

　　（1）skewX(<angle>);表示只在X轴(水平方向)倾斜。

　　（2）skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

 

• matrix() 【matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。】eg:{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}

（二）3D 转换

3D 转换方法：

• rotateX() 【围绕其在一个给定度数X轴旋转的元素】eg:{transform: rotateX(120deg);}
• rotateY() 【围绕其在一个给定度数Y轴旋转的元素。】eg:{transform: rotateY(130deg);}

 

 

七.CSS3过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：（1）指定要添加效果的CSS属性；（2）指定效果的持续时间。

 

八.CSS3动画

　CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

九.CSS3多列

CSS3 可以将文本内容设计成像报纸一样的多列布局。

CSS3 的多列属性:

• column-count（指定了需要分割的列数）
• column-gap（指定了列与列间的间隙。）
• column-rule-style（指定了列与列间的边框样式）
• column-rule-width （指定了两列的边框厚度）
• column-rule-color（指定了两列的边框颜色）
• column-rule（是 column-rule-* 所有属性的简写，设置了列直接的边框的厚度，样式及颜色）
• column-span （column-span: all; 指定元素跨越所有列）
• column-width（指定了列的宽度）

 

十.CSS3用户界面

 

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

用户界面属性：

• resize （指定一个元素是否应该由用户去调整大小）
• box-sizing （允许您以确切的方式定义适应某个区域的具体内容）
• outline-offset 

　　outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

　　轮廓与边框有两点不同：（1）轮廓不占用空间；（2）轮廓可能是非矩形