您的位置:

CSS Transform Text

一、Transform是什么?

CSS Transform(变换)是CSS3中的一个新特性,能够对元素进行旋转、缩放、偏移、倾斜等等操作,让平凡无奇的页面变得更加生动。Transform属性是一种2D或3D变换方法,它是一种全新的呈现(Rendering)方式,它通过一些特殊效应的方式,对图像进行放大、缩小、平移、旋转、扭曲等操作,从而实际上获取一些视觉上的反馈。在CSS(HTML电子样式表)使用过程中,transform能更加方便我们的控制,同时也让页面的交互更加有趣,功能更加强大。

二、Transform属性的基本应用

Transform属性具体包含有旋转、缩放、平移、倾斜,下面将分别进行介绍:

1、旋转:transform:rotate(45deg);该CSS属性中rotate就是旋转的函数,参数中的45deg表示旋转的角度,后缀deg表示单位,deg是degrees(度)的缩写。

.rotate {
    transform: rotate(45deg);
}

2、缩放:transform:scale(0.5);该CSS属性中scale就是缩放的函数,参数中的小数(如0.5)表示缩放的比例,即原来的0.5倍。

.scale {
    transform: scale(0.5);
}

3、平移:transform:translate(x,y);该CSS属性中translate就是平移的函数,参数中的x和y表示偏移距离,正数向右和下移动,负数相反。

.translate {
    transform: translate(50px, 100px);
}

4、倾斜:transform:skew(x,y);该CSS属性中skew就是倾斜的函数,参数中的x和y分别表示水平和垂直方向倾斜的角度。

.skew {
    transform: skew(30deg, 20deg);
} 

三、Transform的联合应用

当然,CSS Transform也支持联合应用,例如同时使用旋转和缩放:

.rotate-scale {
    transform: rotate(45deg) scale(0.5);
}

或者同时使用平移和倾斜,该怎样设置?试想一下,我们需要在水平方向上偏移50px,垂直方向上偏移100px,同时水平方向上倾斜30度,垂直方向上倾斜20度,代码如下:

.translate-skew {
    transform: translate(50px, 100px) skew(30deg, 20deg);
}

四、Transform的3D效果

CSS Transform还支持3D效果,例如通过rotateX,rotateY,rotateZ旋转,通过translateX,translateY,translateZ平移,通过scaleX,scaleY,scaleZ缩放。

为了使读者更好地理解,我们以旋转3D效果举例,下面是一个3D立方体的CSS代码,你可以在浏览器中打开页面查看效果:

/* 建立3D场景 */
.container {
    position: relative;
    perspective: 1000px;
    margin: 100px auto;
    width: 200px;
    height: 200px;
}
/* 六面体组样式 */
.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d; /* 变换方式 */
}
/* 六个面的样式 */
.cube .face {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.9;
}
/* 六个面的旋转设计 */
.back  { transform: rotateY( 180deg) translateZ(100px); }
.bottom{ transform: rotateX( -90deg) translateZ(100px); }
.front { transform: rotateY(    0deg) translateZ(100px); }
.left  { transform: rotateY( -90deg) translateZ(100px); }
.right { transform: rotateY(  90deg) translateZ(100px); }
.top   { transform: rotateX(  90deg) translateZ(100px); }

五、Transform的兼容性

CSS Transform是CSS3中的新特性,因此在多年前的低版本浏览器中并不支持Transform,例如Internet Explore 8(IE8)以及IE8以下版本会不支持。

然而,现代浏览器(如Google Chrome,FireFox,Safari,Opera等)基本上都支持Transform,因此在现在的前端开发过程中,我们可以放心大胆地使用Transform,而不需要考虑浏览器兼容性问题。

六、总结

本文详细介绍了CSS Transform的用法,包括四种基本应用(旋转、缩放、平移、倾斜),联合应用和3D效果,最后提及了Transform的兼容性。

CSS Transform的功能强大,使前端开发更加有趣,让网页更加生动。更多CSS相关知识可参考本站其他相关文章。