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="1.jpg" height="260" width="386" alt="">

	</div>

</body>

</html>

4、旋转 (默认原点旋转)

效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>旋转</title>

	<style>

	div {

		width: 150px;

		height: 150px;

		background-color: pink;

		margin: 100px auto;

		transition: all 0.8s;

	}

	div:hover {

		transform: rotate(45deg); /* 顺时针旋转45度*/

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>

5、旋转 (指定原点旋转)

效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>旋转</title>

	<style>

	div {

		width: 150px;

		height: 150px;

		background-color: pink;

		margin: 100px auto;

		transition: all 1.0s;

		transform-origin: right bottom;  /*设置 旋转中心点为 右下角*/

	}

	div:hover {

		transform: rotate(90deg);   /*旋转90度*/

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>

6、倾斜

效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>倾斜</title>

	<style>

		div {

			width: 150px;

			height: 150px;

			margin: 100px auto;

			background-color: pink;

	        transition: all 1.0s

		}

		div:hover {

		    transform: skew(30deg);   /*倾斜度*/

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>

```
你如果愿意有所作为，就必须有始有终。(17)
```

CSS3(3)---2D变形(transform)的更多相关文章

  1. css3的2D变形

    一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二. ...

  2. css3中的变形 transform详解

    一.变形-旋转 ratate()函数 通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这 个 ...

  3. 2D变形transform的translate和rotate

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. CSS3过渡、变形和动画

    1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{     text-decoration: n ...

  5. CSS3 过渡、变形和动画

    一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...

  6. 【CSS3练习】transform 2d变形实例练习

    transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...

  7. CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  8. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  9. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

随机推荐

  1. 冒泡排序 Day07

    package com.sxt.arraytest2; /* * 冒泡排序 * 思想:两两交换 一路大的向右 */ import java.util.Arrays; public class Bubb ...

  2. Mysql 数据库优化(一)

    一 避免网页访问错误 1  数据库连接timeout产生页面5xx错误 2 慢查询造成页面无法加载 3 阻塞造成数据无法提交 二 增加数据库的稳定性 三 优化用户体验 1 流畅的页面访问速度 2 良好 ...

  3. async/await运用-前端表单弹窗验证同步书写方式(React)

    在前端项目中,我们经常会碰到这样的场景: 当前我们有一个表单需要填写,在完成表单填写后经过校验之后会弹出短信或者其他形式验证码,进行补充校验,然后一起提交给接口. 场景如下图: 当前为创建操作,编辑操 ...

  4. 2011-04-21 运程连Oracle的方法

    oracle无法远程连接重要原因,即使防火墙开放1521端口, 但是返回包可能是随机端口,所以仍有可能被防火墙阻止. 解决方法: 在注册表中增加一个字符串值如下.可解决 花费两天找到的方法 [HKEY ...

  5. 前端开发之BOM和DOM（转载）

    BOM BOM:是指浏览器对象模型,它使JavaScript可以和浏览器进行交互. 1,navigator对象:浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息. naviga ...

  6. asp.net mvc获取路由参数

    学习了mvc有一段时间了,本以为直接可以通过request对象直接获取路由参数呢,后来实验了一下发现想错了,mvc有专门获取路由参数的方式,在不同的地方,获取路由参数的方式也不一样,这里分别说一下,在 ...

  7. POJ 1182食物链、

    应用挑战程序设计那本书上的话: 对于每只动物i创建3个元素i—A,i—B,i—C,并用3xN个元素建立并查集.这个并查集维护如下信息: (1)i—x表示“i属于种类x” (2)并查集里的每一个组表示组 ...

  8. js用for循环实现乘法口诀表

    for循环可以打印一个乘法口诀表.需要使用for循环的嵌套 <script> for(var i = 0; i <= 9; i++){ // 外层循环控制行数,外层循环执行一次,内层 ...

  9. 利用arguments求任意数量数字的和/最大值/最小值

    文章地址 https://www.cnblogs.com/sandraryan/ arguments是函数内的临时数据,用完销毁,有类似于数组的操作,但不是数组. 举个栗子1:利用arguments求 ...

  10. Educational Codeforces Round 7、

    A - Infinite Sequence 题意:有一种这样的无限序列数 1,1,2,1,2,3.....   (如果最大数n,那么就有从1到n的所有1到n的数): 思路:题意只给了1秒.直接模拟肯定 ...