CSS3 2D Transform

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在一个二维或三维空间,元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴;而3D变形工作在X轴和Y轴之外,还有一个Z轴。这些3D变换不仅可以定义元素的长度和宽度,还有深度。我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论。

CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件。同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素。在CSS3 2D变形中主要包含的一些基本功能如下。

位移translate()函数

大家不要误会了,translate并不是指翻译外国语言,在这里translate是一种方法,将元素向指定的方向移动,类似于position中的relative。可以简单的理解为,使用translate()函数,你可以把元素从原来的位置移动,而不影响在X、Y轴上任何组件。

translate()函数的使用语法如下:

translate(tx)

或者

translate(tx,ty)

translate()函数可以取一个值tx,也可以同时取两个值tx和ty,其取值具体说明如下:

  • tx是一个代表X轴(横坐标)移动的向量长度,当其值为正值时,元素向X轴右方向移动,反之其值为负值时,元素向X轴左方向移动。
  • ty是一个代表Y轴(纵向标)移动的向量长度,当其值为正值时,元素向Y轴下方向移动,反之其值为负值时,元素向Y轴上方向移动。如果ty没有显式设置时,相当于ty=0。

CSS3 2D Transform

结合起来,translate()函数移动元素主要有以下三种移动:

  • 水平移动:向右移动translate(tx,0)和向左移动translate(-tx,0)
  • 垂直移动:向上移动translate(0,-ty)和向下移动translate(0,ty);
  • 对角移动:右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)

现在我们来看一些有关于translate()函数的简单例子。我们使用transform:translate(tx,ty)将一个对象从其原始位置移动,其中tx值为正值和ty值等于0时,对像向右移动:

HTML

<div>
    <img src="images/cardKingClub.png" alt="" width="70" height="100" />
    <img src="images/cardKingClub.png" alt="" width="70" height="100" />
</div>

CSS

div {
    width: 500px;
    height: 300px;
    margin: 30px auto;
    position: relative;
    background: url(images/bg-grid.jpg) no-repeat center center;
    background-size: 100% 100%;
}

//默认图片都在容器中水平垂直居中
div img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -35px;
    margin-top: -50px; 
}
div img:nth-child(1){
    opacity: .5;
    z-index: 1;
}
div img:nth-child(2){
    opacity: 1;
    z-index: 2;
    transform: translate(100px,0);
}

效果如下图所示:

CSS3 2D Transform

在这个示例中,我们让扑克牌梅花King相对于原点中心位置向右移动100像素。如果仅需让元素向右移动,我们可以省略ty值。换句话说ty值为0时可以省略不写。如此一来,上面的效果等同与:

div img:nth-child(2){
    opacity: 1;
    z-index: 2;
    transform: translate(100px);
}

要将一个对象移动到左边,我们只需要输入一个负数的X轴坐标,而Y坐标应保持0,基于前面的实例,我们将扑克牌向左边移动100像素:

div img:nth-child(2){
    transform: translate(-100px,0);
}

效果如下图所示:

CSS3 2D Transform

垂直移动一个对象很简单,几乎和水平移动对象相同。唯一的区别是,我们将使用Y轴的值控制对象向上和向下移动位移量。正如我们前面提到的,Y轴的坐标值为正值时,对像向下移动;反之其坐标值为负值时,对象向上移动。而X轴的坐标值应该保持为0。我们来看一个简单的实例,将一扑克牌向上,向下移动100像素:

div img:nth-child(1){
    opacity: .5;
    z-index: 1;
}
div img:nth-child(2){
    z-index: 2;
    transform: translate(0,-100px);
}
div img:nth-child(3){
    z-index: 3;
    transform: translate(0,100px);
}

其效果如下图所示:

CSS3 2D Transform

要让一个元素对角移动,我样将结合X轴和Y轴两坐标的值。根据不同的方向,X轴和Y轴的值可能是正值或是负值。如果我们要将一张扑克牌向右上角移动,需要将X轴坐标设置为正值,将Y轴从标设置为负值;如果要将一张扑克牌向右下角移动,需要将X、Y轴坐标设置为正值;如果要将一张扑克牌向左上角移动,需要将X、Y轴坐标设置为负值;如果要将扑克拍向左下角移动,需要将X坐标设置为负值,Y轴坐标设置为正值。

div img:nth-child(1){
    opacity: .5;
    z-index: 1;
}
div img:nth-child(2){
    z-index: 2;
    transform: translate(100px,-100px);
}
div img:nth-child(3){
    z-index: 3;
    transform: translate(100px,100px);
}
div img:nth-child(4){
    z-index: 3;
    transform: translate(-100px,-100px);
}
div img:nth-child(5){
    z-index: 3;
    tra
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-2d-transform.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部