当前位置：首页 > Web开发 > 正文

就必须有始有终

2024-03-31 Web开发

标签：

CSS3(3)---2D变形(transform)

2D变形是CSS3中具有颠覆性的特征之一，它常用的属性有:移动(translate)、缩放(scale)、旋转(rotate)、倾斜 (skew)。

一、2D变形语法 1、移动 (translate)

移动的属性: translate

translate(x,y)程度标的目的和垂直标的目的同时移动（也就是X轴和Y轴同时移动） translateX(x)仅程度标的目的移动（X轴移动） translateY(Y)仅垂直标的目的移动（Y轴移动）

好比设置为:

transform: translate(50px,60px); /* 程度向右移动50px 和垂直向下移动60px*/

运行功效

技术图片

说明从上面运行功效可以看出两点

1、移动的原点默认是 最左角上 的位置。

2、px取正数代表向右或者向下。Px为负值,那就酿成向左或者向上。

2、缩放 (scale)

缩放的属性: scale

scale(X,Y)使元素程度标的目的和垂直标的目的同时缩放（也就是X轴和Y轴同时缩放） scaleX(x)元素仅程度标的目的缩放（X轴缩放） scaleY(y)元素仅垂直标的目的缩放（Y轴缩放）

说明 scale默认值为1,设置0.5代表缩小一倍,2代表放大一倍。

好比设置为:

transform: scale(0.5,1); /* 程度缩小0.5倍和垂直不乱 */

运行功效

技术图片

3、旋转 (rotate）

旋转属性 : rotate (正值为顺时针，负值为逆时针)

好比设置为:

transform: rotate(45deg); /* 注意单位是 deg 度数 */

运行功效

技术图片

我们可以看到这里旋转默认是以对角线的位置进行旋转，这里也可以设置以其它位置进行旋转。

调解元素转换变形的原点属性：transform-origin

div {transform-origin: left top;transform: rotate(45deg); } /* 转变元素原点到左上角，然后进行顺时旋转45度 */ /*如果是4个角，可以用 left top这些，，如果想要精确的位置，可以用 px 像素*/ div {transform-origin: 10px 10px;transform: rotate(45deg); } /* 转变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */ 4、倾斜 (skew)

旋转属性 : rotate (正值为顺时针，负值为逆时针)

好比设置为:

transform: skew(30deg,0deg); /* 程度标的目的上倾斜30度，垂直标的目的连结不乱 */

运行功效

技术图片

二、示例 1、移动

效果

技术图片

代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡</title> <style> div { width: 100px; height: 100px; background-color: pink; transition: all 1.2s; /*过渡时间1.2秒*/ } div:hover { transform: translate(100px, 50px); /*程度移动100px 垂直移动50px*/ } </style> </head> <body> <div></div> </body> </html> 2、缩放

效果

技术图片

代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>缩放</title> <style> div { width: 200px; height: 200px; background-color: pink; transition: all 1.2s; /*过渡时间1.2秒*/ } div:hover { /*transform: scale(0.8, 1); 0 0% 1 100% 宽度变为了本来的 80% 高度不乱*/ /*transform: scale(1, 0.8); 0 0% 1 100% 宽度变为了本来的 80% 高度不乱*/ transform: scale(0.5); /* 高度和宽度一起缩放都是 0.5 */ } </style> </head> <body> <div> </div> </body> </html> 3、缩放(新浪图片放大)

效果

技术图片

代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>缩放</title> <style> div { width: 386px; height: 260px; overflow: hidden; /*多余部分隐藏*/ } div img { transition: all 0.5s; /*设置过渡时间*/ } div:hover img { transform: scale(1.1); /*设置放大1.1倍*/ } </style> </head> <body> <div> <img src=http://www.mamicode.com/"1.jpg" height="260" width="386" alt=""> </div> </body> </html> 4、旋转 (默认原点旋转)

效果

技术图片