css3的transform 2D 转换

原创 2013年12月03日 15:39:44

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 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

主要实验的是rotate、translate、scale、skew、matrix这五个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	div{
		width:200px;
		height:100px;
		background-color:#0FF;
		border:1px solid #F00;
	}

	.rotate{
		transform:rotate(9deg);
		-ms-transform:rotate(9deg); /* Internet Explorer */
		-moz-transform:rotate(9deg); /* Firefox */
		-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
		-o-transform:rotate(9deg); /* Opera */
	}
		
/*	div.translate{
		transform:translate(20deg,30deg);
		-ms-transform:translate(20px,30px); 
		-moz-transform:translate(20px,30px); 
		-webkit-transform:translate(20px,30px); 
		-o-transform:translate(20px,30px) 
	}*/
/*	
	div.scale1{
		margin:100px;
		transform:scale(2,3);
		-ms-transform:scale(2,3); 
		-moz-transform:scale(2,3); 
		-webkit-transform:scale(2,3);
		-o-transform:scale(2,3);
	}*/
	
	/*
	div.skew{
		transform:skew(40deg,20deg);
		-ms-transform: skew(30deg,20deg);	
		-webkit-transform: skew(30deg,20deg);	
		-o-transform: skew(30deg,20deg);	
		-moz-transform: skew(30deg,20deg);	
	}*/
	div.matrix{
		transform:matrix(0.866,0.5,-0.5,0.866,0,0);
		-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
		-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
		-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
		-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
	}
</style>
<title>无标题文档</title>
</head>

<body style="margin:100px;">
<!--
<div class="rotate">这个是transform:rotate();的效果</div>
-->
<br />
<!--<div>这个是第一个transform:translate</div>
<div class="translate">这个是第二个transform:translate</div>
-->
<!--
<div>这个是第一个transform:scale</div>
<div class="scale1">这个是第二个transform:scale</div>
-->
<!--
<div>这个是第一个transform:skew()</div>
<div class="skew">这个是第二个transform:skew()</div>
-->
<div>这个是第一个transform:matrix()</div>
<div class="matrix">这个是第二个transform:matrix()</div>
</body>
</html>

每个的效果图:

rotate的效果图:

translate的效果图:

scale的效果图:

skew的效果图:

matrix的效果图:




版权声明:原创文章,请标明出处~~~

CSS3 2D转换&3D转换

1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 10...
  • zhaobw831
  • zhaobw831
  • 2016年01月17日 19:56
  • 2440

HTML5学习笔记—CSS3 transform转换属性(2D/3Dtransform方法)

transform方法 table{ border:3px solid yellow; border-collapse:collapse; } td,th{ border:1px solid pin...
  • ccnanxi
  • ccnanxi
  • 2017年01月03日 16:00
  • 475

CSS3特效:2D转换&小案例

一、2D转换之移动 1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 2. translate(x,y)        //定义2D转换 ...
  • luohuaxinyue
  • luohuaxinyue
  • 2015年12月28日 20:30
  • 1038

CSS3第二日--2D转换

CSS3提供了2D转换功能,能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform,使用方法为transform:method(value)。 2D转换方法有translat...
  • ljl890705
  • ljl890705
  • 2016年01月06日 16:57
  • 629

css3 transform 2D转换(动画系列一)

transform(变形)、transition(过渡)和animation(动画)是CSS3动画的3大部分,由于它们的出现,web前端实现动画变得简单方便起来,不在单纯依靠js,实现的动画效果也不错...
  • kongbingyan
  • kongbingyan
  • 2016年04月04日 18:21
  • 447

2d转换——transform

其实css的设计也是源于日常,首先我在这里简单的介绍一下transform,其实就是旋转,在我们的现实生活中,一个物体可以在一个空间坐标系中任意旋转,css的设计也是如此,我们就以一个简单的div为例...
  • XBQ0510Qi
  • XBQ0510Qi
  • 2018年01月15日 22:04
  • 2

CSS3特效之转换transform

transform 语法 transform: none| rotate | scale | skew | translate | matrix;通过transform-origin可以设置转...
  • gepingping
  • gepingping
  • 2013年04月07日 19:59
  • 713

HTML5和CSS3实现3D转换效果 CSS3的3D效果

上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块。   首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向。 ...
  • e62ces0iem
  • e62ces0iem
  • 2017年06月15日 13:39
  • 336

简单粗暴的解释css3中的transform属性

事先说明,本文范畴尚限制在2D的transform中。        对于css3的transform属性,真是爱不释手,有了这个特性,各种特效轻松搞定。引用一句歌词“旋转,跳跃,我不停歇”。tra...
  • u010571913
  • u010571913
  • 2015年04月23日 15:59
  • 1012

关于CSS3中transform属性对元素布局的影响。

今天了解transform属性时发现一个奇怪的现象,就是使用transform属性的时候,无论是translate,rotate,skew还是scale,对于伪元素:after和:before,都会产...
  • C860_zy
  • C860_zy
  • 2013年12月26日 23:44
  • 2504
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的transform 2D 转换
举报原因:
原因补充:

(最多只允许输入30个字)