首页 前端知识 CSS转换属性transform

CSS转换属性transform

2024-01-26 00:01:46 前端知识 前端哥 150 218 我要收藏

CSS3之transform属性(转换)

学习转换之前先看下图

在这里插入图片描述

一、平移translate函数

1、translate()函数

作用:在水平和/或垂直方向上重新定位元素。

.box1,.box2{
    width: 200px;
    height: 100px;
    background-color: #ccc;
    margin-top: 10px;
}
.box2{
    /* x轴(横向)平移40px;y轴(向下)平移60px */
    transform: translate(40px,60px);
    /* x轴平移-50px(向左) */
    transform: translate(-50px);
}
<div class="box1">1</div>
<div class="box2">2</div>
2、translateX()函数

作用:表示在二维平面上水平方向移动元素。

.box1,.box2{
    width: 200px;
    height: 100px;
    background-color: #ccc;
    margin-top: 10px;
}
.box1{
    /* box1在水平方向平移了一个自身宽度(百分比)的距离
    百分比是相对于盒子宽度的值
    */
    transform: translateX(100%);
}
<div class="box1">1</div>
<div class="box2">2</div>
3、translateY()函数

作用:表示在二维平面上垂直方向移动元素。

.box1,.box2{
    width: 200px;
    height: 100px;
    background-color: #ccc;
    margin-top: 10px;
}
.box1{
    /* box1在垂直方向平移了自身高度20%的距离
    百分比是相对于盒子高度的值
    */
    transform: translateY(-20%);
}
4、translateZ()函数

作用:表示在三维平面上**垂直方向(z轴)**移动元素。

.box2{
    background-color: #999;
    /* perspective透视视图(近大远小)函数的数值越小,离屏幕越近,反之越远 */
    /* translateZ(-20px)第二个div会向屏幕内部(z轴)平移20px */
    transform:  perspective(100px) translateZ(-20px);
}
<div class="box">div的内容</div>
<div class="box2">div的内容2</div>
<div class="box3">div的内容3</div>

浏览器效果:

在这里插入图片描述

5、translate3d()函数

需要结合perspective()函数使用,才能看到效果:

.box,.box2,.box3{
    width: 120px;
    height: 100px;
    background-color: #ccc;
    margin: 0 auto;
    margin-top: 5px;
}
.box2{
    background-color: #999;
    /* perspective透视视图(近大远小)函数的数值越小,里的越近 */
    /* x轴平移0px,y轴平移30px,z轴平移20px */
    transform:  perspective(100px) translate3d(0px,30px,20px);
}
<div class="box">div的内容</div>
<div class="box2">div的内容2</div>
<div class="box3">div的内容3</div>

浏览器效果:

在这里插入图片描述

二、scale缩放函数

1、scale()函数

作用:放大或缩小元素。

.box:hover{
    /* 以下表示不缩放 */
    transform: scale(1);
    /* 以下表示放大1.5倍(x轴和y轴都会变化) */
    transform: scale(1.5);
    /* 以下表示缩小0.5倍(x轴和y轴都会变化) */
    transform: scale(0.5);
    /* 以下两个参数,表示x轴是1不变,y轴放大1.2倍 */
    transform: scale(1,2);
    /* 以下两个参数,表示x轴是放大2倍,y轴不变 */
    transform: scale(2,1);
   
}
<div class="box">
    盒子内容
</div>
2、scaleX()函数
/* 表示元素在x轴上放大2倍 */
transform: scaleX(2);
3、scaleY()函数
/*表示在Y轴上缩小0.5倍 */
transform: scaleY(0.5);

三、rotate()函数

作用:将元素围绕一个定点旋转而不变形的转换。若角度为正,则顺时针方向旋转,否则逆时针方向旋转。

1、rotate(d)

**1)作用:**元素绕Z轴旋转d值的角度,d表示旋转角度

2)案例:

/* 元素在鼠标移入的时候,绕z轴逆时针旋转40度 */
.box:hover{
    transform:perspective(500px) rotate(-40deg);
}
2、rotateX(d)

**1)作用:**元素绕X轴旋转d值的角度。

2)案例:

/* 元素在鼠标移入的时候,绕X轴顺时针旋转45度 */
.box:hover{
    transform:perspective(500px) rotateX(45deg);
}
3、rotateY(d)

**1)作用:**元素绕Y轴旋转d值的角度。

2)案例:

/* 元素在鼠标移入的时候,绕Y轴顺时针旋转45度 */
.box:hover{
    transform:perspective(500px) rotateY(45deg);
}
4、rotate3d()函数

**1)作用:**将元素围绕固定轴旋转

**2)语法:**rotate3d(x,y,z,a)

3)值:

  • x

    数值类型,可以是 0 到 1 之间的数值,表示旋转轴 X 坐标方向的矢量。

  • y

    数值类型类型,可以是 0 到 1 之间的数值,表示旋转轴 Y 坐标方向的矢量。

  • z数值类型 类型,可以是 0 到 1 之间的数值,表示旋转轴 Z 坐标方向的矢量。

  • a

  • 角度 类型,表示旋转角度。正的角度值表示顺时针旋转,负值表示逆时针旋转。

四、skew()函数

1、skew()

**1)作用:**元素在二维平面上的倾斜转换。

2)语法:

skew(xa[,ya]) xa参数表示的是x轴倾斜的角度;ya是可选参数(表示向y轴倾斜的角度)

**注意:**值可以是正角度值和负角度值。

3)案例:

.box{
    /* 20deg表示向x轴倾斜20度,10deg表示向y轴倾斜10度 */
    transform: skew(20deg,10deg);
    /* 只有一个参数,表示向x轴倾斜40度,*/
    transform: skew(40deg);
}

2、skewX()

**1)作用:**元素在二维平面上的向x轴倾斜。

2)语法:

skewX(xa) xa参数表示向x轴倾斜的角度。

3)案例:

/* 元素沿着x轴(水平)方向,向右倾斜20度 */
transform: skewX(-20deg);

3、skewY()

**1)作用:**元素在二维平面上的向Y轴倾斜。

2)语法:

skewY(ya) ya参数表示向y轴倾斜的角度。

3)案例:

/* 应用此属性的元素沿着Y轴,向下倾斜20度 */
transform: skewY(20deg);
4、perspective(n)

**1)作用:**使用者能够通过透视原理,更直观的看到元素。

**2)值:**n是一个距离参数,可以理解为用户距离元素的距离;值越大视角越远。

3)案例:

.box2{
    width: 200px;
    height: 200px;
    background-color: #aa55ff;
    transform: perspective(500px) rotateX(40deg);
}
<div class="box">box</div>
<div class="box2">box2</div>

浏览器效果:

以下是perspective(800px)的效果:

在这里插入图片描述

以下是perspective(200px)的效果:

在这里插入图片描述
transform-orangin(待更)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/411.html
标签
css3
评论
发布的文章

CSS3新增样式

2024-02-05 11:02:24

jQuery的介绍

2024-02-05 11:02:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!