css3之2D转换

css3---2D转换

  css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动、缩放、转动、拉长或者拉伸,所以希望在这里和大家分享以下。

  这里,我将会介绍到以下转换方法:

  • translate()
  • rotate()
  • scale()
  • skew()

  首先,我们先插入一个简单的html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Css3的2D转换</title>
	<style type="text/css">

		*{
			margin:0;
			padding:0;
		}

		#picture{
			width:100%;
			height:500px;
			background:#ccc;
		}

		img{
			margin:100px 0 0 100px;
		}

	</style>
</head>
<body>

	<div id="picture">
			<img src="mary.gif" alt="This is a picture" >
	</div>

</body>
</html>

  这段代码我们可以实现在一个div里放一张图片,通过这张图片以便于向大家介绍以下方法。

  1.translate()方法:这个方法里可以有两个参数,中间用分号隔开,分别表示沿着X轴和Y轴移动的距离,这个距离是相对于该图片的移动距离,且向右为Y轴的正方向,向下为X轴的正方向。下面的代码表示将图片向右移动100px,向下也移动100。  

img{
	margin:100px 0 0 100px;
        transform:translate(100px,100px);
}

  2.rotate()方法:这个方法里有一个参数,表示要旋转的度数,正数表示顺时针旋转,那么负数就表示逆时针旋转了。在要旋转的度数后面添加deg (即degree,度数的意思)。以下代码表示将图片顺时针旋转50°。

img{
	margin:100px 0 0 100px;
        transform:rotate(50deg);
}

  3.scale()方法:这个方法里有两个参数,没有单位。分别表示宽度和高度放大或缩小的倍数,如果大于1表示放大;如果小于一表示缩小。以下代码表示将图片的宽度和高度都放大两倍。

img{
	margin:100px 0 0 100px;
        transform:scale(2,2);
}

  4.skew()方法:有两个参数,分别表示沿着X轴和Y轴倾斜转换,单位同样是deg,表示角度。这个方法不是很容易理解。首先给出下列代码:

img{
	margin:100px 0 0 100px;
	transform:skew(20deg,0deg);
}

表示将图片沿着x轴逆时针旋转20度。

这是没有使用skew()方法的样子

这是使用了skew()方法之后的样子。

为什么呢?这是因为其x轴和Y轴的方向是这样的:

当x轴旋转20°时会将图片进行逆时针旋转,但是请注意:这里不是真正意义上的旋转,而有拉伸倾斜的意思,旋转之后,它的宽度并没有改变,并且做一条垂线可以发现高也是没有改变的。

对于Y轴方向的旋转是一样的:

img{
	margin:100px 0 0 100px;
	transform:skew(0deg,20deg);
}

上面的代码表示将图片沿着Y轴方向旋转了20°。

旋转之后,就是下面这样了:它是沿着顺时针方向旋转的。

如果,我们对x和y轴都旋转呢?

img{
	margin:100px 0 0 100px;
	transform:skew(20deg,20deg);
}

那么最终就是综合作用的效果了,如下图所示:

说了这么多,大家有没有发现我们每次偏移,旋转,倾斜,放大和缩小是相对于哪个点呢?

如果你稍微细心的话,就会发现是相对于中心点。这里就要用到tansform-origin属性了。

即通过这个属性,我们可以规定这些方法通过哪一个点作为原点。首先举几个例子。

transform-origin:0 0;表示以左上角为原点。

transform-origin:100% 0;表示以右上角为原点

transform-origin:0 100%;表示以左下角为原点

transform-origin:100% 100%;表示以右下角为原点

于是我们可以得知,这些值的设定是以左上角为基点的,向右为x轴的正方向,向下为y轴的正方向。如果不设定这个属性,那么默认值为

transform-origin:50% 50%;即以中心作为变换的基点。

ok,css3之2d转换就讲到这里了。

  

时间: 10-19

css3之2D转换的相关文章

CSS3的3D转换效果详解介绍

CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只是此属性的部分应用,更多相关内容可以参阅CSS3的transform属性总略介绍一章节.掌握3D转换效果,可以从三个方法作为突破口,分别是rotateX, rotateY, rotateZ,在2D变换过程中rotate()函数的应用,它表示旋转的意思,由于是2D变换,所以它只是在一个平面进行旋转,所以无需细分,具体可以参阅CSS3的2D转换效果详细介绍一章节. 下面分别介绍一

CSS笔记(十二)CSS3之2D和3D转换

参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵. translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素. translateX(n) 定义 2D 转换,沿着 X 轴移动元素. translateY(n) 定义 2D 转换,沿着 Y 轴移动元素. scale(x,y) 定义 2D 缩放转换,改

css3 2d转换3d转换以及动画的知识点汇总

css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换的属性: transform transform-origin 用法: 例如: div { transform:

Css3之高级-5 Css转换(简介、2D转换、3D转换)

一.转换简介 转换概述 - 转换是使元素改变形状.尺寸和位置的一种效果 - 又称为变形,即,可以向元素应用2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜 - 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化,改变其形状.尺寸和位置 - 3D 转换:元素还可以在 Z 轴上发生变化 转换属性 - transform 属性向元素应用 2D 或者 3D 转换 - 指定一组转换函数,取值 - transform: none/transform-function; - none - 默认值

css3 2d转换

<!DOCTYPE html><html><head> <title>2D转换</title> <style type="text/css"> .box{ width: 400px; height: 400px; margin: 100px auto; position: relative; } img:nth-child(1){ width: 400px; height: 400px; } img:nth-chi

【Demo】CSS3 2D转换

2D转换: 2D变换方法: translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ } translate值(50px,100px)是从左边元素移动50个像

动画,2D转换,,3D转换怎样运用

动画 @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果. 属性{[email protected] 2animation } 如:@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {b

CSS 3学习——transform 2D转换

首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒子发生了变换,该属性的默认值是"border-box",查MDN只有Firefox支持该属性(我试的没效果). CSS 3 中2D转换的实现用到两个属性: 属性 描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 指定变换的基点的位置

11.24 2D转换

1 <head> 2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 3 <title>2D转换</title> 4 <meta name="keywords" content="关键字列表" /> 5 <meta name="description"