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 transform 2D转换(动画系列一)

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

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
  • 362

css3transform--2D篇--rotate

说起css3,不得不提css3的维度模块(字我也不晓得写错没),维度比较简单,就是一个transform,但是呢,该属性对应的值却不少。     首当其冲的是rotate(XXdeg) ,该值表示元素...

css3的transform2D用法

1.基本的用法transform: translate(20px, 20px);transform: rotate(30deg);transform-origin:0 0;transform: rot...

CSS3中的变形与动画(上)【2D】 Transform 和 Transition

本文转自 http://www.imooc.com/learn/33 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内...
  • ssisse
  • ssisse
  • 2016年04月24日 21:09
  • 333

CSS3 transform:rotate(deg) 2D旋转效果

index body{ background:url(img/a.jpg);

CSS3 Transform(2D变换)

总结了CSS3中的2D变换,四大变形函数,以及translate 与绝对定位、相对定位的区别,rotate()函数的应用技巧和shew()函数的使用场景和技巧!打好基础,才能很好运用CSS3中的3D变...
  • macanfa
  • macanfa
  • 2016年07月17日 21:46
  • 445

汇总之--css3 transition,transform2d-3d

个人博客 如有错误请指正谢谢大家transition 基本写法 /* 过渡属性 可以指定 某一个 或者某一些 如果想要所有的都能够过渡 使用all即可 */ tr...

CSS3动画功能 --- transition、transform、3D场景

transitiontransition: -webkit-transition: 谷歌浏览器和Safari浏览器 -moz-transition: 火狐浏览器 -o-transition...

css3 3D transform 变换

好吧,CSS3 3D transform变换,不过如此! by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhan...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的transform 2D 转换
举报原因:
原因补充:

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