CSS3 之2D变换(旋转,缩放,位移,矩阵函数)

原创 2016年05月02日 16:44:39

CSS3 之2D变换

 

l transform

•     rotate()  旋转函数 取值度数

–    deg  度数

–    Transform-origin旋转的基点

•     skew()倾斜函数 取值度数

–    skewX()

–    skewY()

•     scale()缩放函数 取值 正数、负数和小数

–    scaleX()

–    scaleY()

•     translate()位移函数

–    translateX()

–    translateY()

 

 

 

 

1.       rotate() 旋转函数取值度数

   deg  度数

<style>

body{height:400px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:Red;margin:100pxauto 0; transition:2s;}

body:hover .box{ -webkit-transform:rotate(360deg);}

</style>

</head>

<body>

<divclass="box">111</div>

</body>

 

 

 

2.       斜切

 

 

1)       skewX()

<style>

body{height:400px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:Red;margin:100pxauto 0; transition:2s;}

body:hover .box{ -webkit-transform:skewX(45deg);}

</style>

</head>

<body>

<divclass="box">111</div>

</body>

 


 

2)       skewY()

<style>

body{height:400px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:Red;margin:100pxauto 0; transition:2s;}

body:hover .box{ -webkit-transform:skewY(45deg);}

</style>

</head>

<body>

<divclass="box">111</div>

</body>

 

 

3)       X,Y综合

<style>

body{height:400px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:Red;margin:100pxauto 0; transition:2s;}

body:hover .box{ -webkit-transform:skew(15deg,30deg);}

</style>

</head>

<body>

<divclass="box">111</div>

</body>

 

 

4)       综合案例:斜切的导航

<style>

ul{margin:0;padding:0; list-style:none;}

li{float:left;width:100px;text-align:center;height:30px;border:1px solid #fff; background:Red;font:12px/30px "宋体"; -webkit-transform:skewX(30deg);}

a{text-decoration:none;-webkit-transform:skewX(-30deg); display:block;}

</style>

</head>

<body>

<ul>

      <li><ahref="#">妙味课堂</a></li>

   <li><a href="#">妙味茶馆</a></li>

</ul>

</body>

 

 

 

 

 

3.       scale()缩放函数取值正数、负数和小数

body{height:400px;border:1px solid #000;}

.box{width:100px;height:100px;background:Red;margin:100pxauto 0; transition:2s;}

body:hover .box{-webkit-transform:scale(2);}

</style>

</head>

<body>

<divclass="box">111</div>

</body>

 

放大2

 

 

 

4.       translate()位移函数

<style>

body{height:400px;border:1px solid #000;}

.box{width:100px;height:100px;background:Red;margin:100pxauto 0; transition:2s;}

body:hover .box{ -webkit-transform:translate(-100px,200px);}

</style>

</head>

<body>

<div class="box">111</div>

</body>

 

向左下移动

 

 

 

5.       Transform-origin变换基点

旋转默认是以元素中心旋转

 

 

1:关键字形式

基点:右下  加旋转,缩小

<style>

body{height:300px;border:1px solid #000;}

.box{width:100px;height:100px;background:Red;margin:100pxauto; transition:5s; -webkit-transform-origin:rightbottom;}

body:hover .box{-webkit-transform:rotate(360deg) scale(0.2);}

</style>

</head>

<body>

<divclass="box">111</div>

</body>

 

 

 

 

2:具体数值

<style>

body{height:300px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:Red;margin:100pxauto; transition:5s; -webkit-transform-origin:200px200px;}

body:hover.box{ -webkit-transform:rotate(360deg) scale(0.2);}

</style>

</head>

<body>

<divclass="box">111</div>

</body>

 

基点在方块外,实现图片向外旋转出去的效果

 

 

 

6.  Transform 执行顺序问题 — 后写先执行

<style>

body{height:300px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:Red;margin:10px;transition:1s;}

body:hover.box:nth-of-type(1){ -webkit-transform:translateX(100px) scale(0.5);}

body:hover.box:nth-of-type(2){ -webkit-transform:scale(0.5) translateX(100px);}

</style>

</head>

<body>

<divclass="box">111</div>

<divclass="box">222</div>

</body>

 

顺序不同,执行出效果就不同

第一个:先缩放0.5,再向右走100px

第二个:先向右走100px,再缩小0.5,相当于向右走50

 

 

 

7.  matrix(a,b,c,d,e,f)矩阵函数

8.   

标准模式:

matrix(1,0,0,1,0,0)(默认形式)

matrix(a,b,c,d,e,f);

 

IE模式:

progid:DXImageTransform.Microsoft.Matrix(M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');

Matrix(M11= a, M12= c, M21= b , M22=d,SizingMethod='auto expand');

 

 

1)  通过矩阵实现位移

x轴位移: e=e+x

y轴位移: f=f+y

 

<style>

body{height:300px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:red;transition:1s;}

body:hover .box{ -webkit-transform:matrix(1,0,0,1,200,300);}

/*

   位移:

   x:e+disX

   y:f+disY

*/

</style>

</head>

<body>

<divclass="box"></div>

</body>

 

 

2)  缩放:

   x轴缩放 a=x*a  c=x*c;

    y轴缩放 b=y*b  d=y*d;

 

 

 

X轴缩放0.5,Y轴缩放0.2

<style>

body{height:300px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:red;transition:1s;}

</style>

</head>

<body>

<div class="box"id="box"></div>

<script>

varoBox=document.getElementById("box");

oBox.onclick=function()

{

   oBox.style.WebkitTransform="matrix(0.5,0,0,0.2,0,0)";

   oBox.style.MozTransform="matrix(0.5,0,0,0.2,0,0)";

   oBox.style.transform="matrix(0.5,0,0,0.2,0,0)";

   oBox.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11= 0.5, M12= 0, M21= 0 , M22=0.2,SizingMethod='auto expand')";

}

</script>

 

 

 

3)  通过矩阵实现倾斜

x轴倾斜: c=Math.tan(xDeg/180*Math.PI)

y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

 

 

 

X轴倾斜30度,c=Math.tan(30/180*Math.PI)约等于0.58

<style>

body{height:300px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:red;transition:1s;}

</style>

</head>

<body>

<div class="box"id="box"></div>

<script>

varoBox=document.getElementById("box");

oBox.onclick=function()

{

   oBox.style.WebkitTransform="matrix(1,0,0.58,1,0,0)";

   oBox.style.MozTransform="matrix(1,0,0.58,1,0,0)";

   oBox.style.transform="matrix(1,0,0.58,1,0,0)";

   oBox.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11= 1, M12= 0.58, M21= 0 , M22=1,SizingMethod='auto expand')";

}

</script>

</body>

 

 

 

 

斜切加放大

<style>

body{height:300px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:red;transition:1s;}

</style>

</head>

<body>

<div class="box"id="box"></div>

<script>

varoBox=document.getElementById("box");

oBox.onclick=function()

{

   oBox.style.WebkitTransform="matrix(2,1.16,0,2,0,0)";

   oBox.style.MozTransform="matrix(1,0.58,0,1,0,0)";

   oBox.style.transform="matrix(1,0.58,0,1,0,0)";

   oBox.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11= 1, M12= 0, M21= 0.58 , M22=1,SizingMethod='auto expand')";

}

</script>

</body>

 

 

 

4)  通过矩阵实现旋转

a=Math.cos(deg/180*Math.PI);

b=Math.sin(deg/180*Math.PI);

c=-Math.sin(deg/180*Math.PI);

d=Math.cos(deg/180*Math.PI);

 

 

 

旋转30

<style>

body{height:300px;border:1pxsolid #000;}

.box{width:100px;height:100px;background:red;transition:1s;}

</style>

</head>

<body>

<div class="box"id="box"></div>

<script>

varoBox=document.getElementById("box");

oBox.onclick=function()

{

   oBox.style.WebkitTransform="matrix(0.87,0.5,-0.5,0.87,0,0)";

   oBox.style.MozTransform="matrix(0.87,0.5,-0.5,0.87,0,0)";

   oBox.style.transform="matrix(0.87,0.5,-0.5,0.87,0,0)";

   oBox.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11= 0.87, M12= -0.5, M21= 0.5 , M22=0.87,SizingMethod='auto expand')";

  

   alert(this.offsetWidth);

}

</script>

 

 

一个小bug,在IE下,不是围绕中心旋转

 

 

5)  IE下基点修正

        <style>

.box{width:100px;height:100px;margin:30px auto;position:relative;border:1px solid #000;}

#box{width:100px;height:100px;background:red;position:absolute;left:0;top:0;}

</style>

</head>

<body>

<div class="box">

  <divid="box"></div>

</div>

<script>

var oBox=document.getElementById("box");

var iDeg=0;

setInterval(function(){

  iDeg++;

  toRotate(oBox,iDeg);

},30);

function toRotate(obj,iDeg)

{

  vara=Math.round(Math.cos(iDeg/180*Math.PI)*100)/100;

  varb=Math.round(Math.sin(iDeg/180*Math.PI)*100)/100;

  var c=-b;

  var d=a;

  obj.style.WebkitTransform="matrix("+a+","+b+","+c+","+d+",0,0)";

  obj.style.MozTransform="matrix("+a+","+b+","+c+","+d+",0,0)";

  obj.style.transform="matrix("+a+","+b+","+c+","+d+",0,0)";

  obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11="+a+", M12= "+c+", M21= "+b+" ,M22="+d+",SizingMethod='auto expand')";

  obj.style.left=(obj.parentNode.offsetWidth-obj.offsetWidth)/2+"px";

  obj.style.top=(obj.parentNode.offsetHeight-obj.offsetHeight)/2+"px";

}

</script>

</body>

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45...
  • er_ba
  • er_ba
  • 2015年07月26日 00:07
  • 6563

【CSS3】变形--位移 translate()

translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任...
  • happyhaojie
  • happyhaojie
  • 2016年02月24日 15:52
  • 18761

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

index body{ background:url(img/a.jpg);
  • boonyaxnn
  • boonyaxnn
  • 2017年03月12日 00:34
  • 267

css3-2d变换 旋转 等属性

/*--------------------------------2d变换 之 缩放 scale-----------------------------------*/ ...
  • gyq04551
  • gyq04551
  • 2016年11月21日 20:22
  • 165

CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...

旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transit...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2016年11月11日 13:02
  • 6278

CSS旋转与翻转

转自:http://blog.sina.com.cn/a287019674 css 2.0还是没有翻转的,3.0里面有rotate属性,这个可以把元素进行任意角度旋转,灰常强大。除了这个rotate,...
  • u011465574
  • u011465574
  • 2015年06月03日 23:00
  • 1427

css3transform--2D篇--rotate

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

css3 2D图片转动样式

/*2D图片转动样式*/ .leftyyy { transform:rotate(-30deg); -webkit-transform:rotate(-30deg); /* Safari an...
  • zhuyu19911016520
  • zhuyu19911016520
  • 2014年04月29日 16:05
  • 945

css3 动画之 2D旋转 3D旋转 放大

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • viciousDear
  • viciousDear
  • 2015年05月30日 20:14
  • 1849

css3中的变形(transform)、过渡(transtion)、动画(animation)

css3中的变形(transform)、过渡(transtion)、动画(animation)
  • kongbingyan
  • kongbingyan
  • 2016年04月04日 11:18
  • 6793
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 之2D变换(旋转,缩放,位移,矩阵函数)
举报原因:
原因补充:

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