CSS3 之2D变换（旋转，缩放，位移，矩阵函数）

最新推荐文章于 2024-08-04 22:32:07 发布
最新推荐文章于 2024-08-04 22:32:07 发布
阅读量1w 收藏 10
点赞数 1
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013267266/article/details/51296966
版权

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.οnclick=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.οnclick=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.οnclick=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.οnclick=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>

tianshizhimeng155
关注
专栏目录
css3 Matrix：可以同时缩放旋转平移的transform的属性值
sophiaYang517的博客
11-27 8109
css3 Matrix：可以同时缩放和旋转平移元素transform的属性值 我比较懒，为了方便同样跟我一样懒得人，直接上干货！ Matrix是什么？ Matrix是Css3中的一个的一个新属性transform的属性值，transform用来元素的2D或3D变形；也就是你可以将元素旋转，缩放，移动，倾斜等。 什么时候需要用到Matrix？ transform有很多变形的属性，比如：transla...
深入解读CSS3中transform变换模型的渲染
09-27
1. 2D变换和3D变换：CSS3的transform属性支持2D变换，如位移（translate）、缩放（scale）、旋转（rotate）和倾斜（skew），这些变换是在二维空间内进行的。而当引入了透视（perspective）等3D效果时，就可以创建3D...
矩阵变换（2D 平移 旋转 缩放）.rar
05-06
2D坐标系中的矩阵变换，坐标位置根据某一点做旋转，平移，得到新的坐标位置。附件中的实例下载运行后可以直接看到效果
2D转换
我的博客
05-06 616
2D转换 transform 2D移动：translate()。使用translate()函数，可以把元素从原来的位置移动，移动参照元素左上角原点 语法：translate(x px) | translate(x, y px) 只设置一个参数表示向x方向移动，设置两个参数表示向x和y方向移动 也可以使用translateX(x)或者translateY(y) 执行完毕之后会回到原始状态 有一个...
CSS学习文档（7）：2D转换、动画、浏览器私有前缀
最新发布
m0_58433849的博客
08-04 995
（2）同时使用多个转换，其格式为:transform: translate( rotate() scale) ..等。它是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。（2）示例代码如下：（分页按钮案例）
2D转换css,CSS3 2D 转换
weixin_35046143的博客
08-03 81
CSS3 转换CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。它是如何工作？变换的效果，让某个元素改变形状，大小和位置。您可以转换您使用2D或3D元素。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。属性transform36.04.0-webkit-10.09.0-ms...
css基础篇-2D变换
luckydog
10-01 103
css基础篇一
CSS-2D转换
堇年
08-24 350
2D 转换 translate() rotate() scale() translate() 通过 translate() 方法，元素从其当前位置移动，根据给定的left（x 坐标) 和 top（y 坐标） 位置参数 /*从左侧移动 50 像素，从顶端移动 100 像素*/ div { transform: translate(50px,100px); } rotate() 元素顺时针旋转...
CSS3之2D与3D变换的实现方法
12-13
2D变换主要涉及元素在二维平面上的位移、旋转、缩放、倾斜等操作，而3D变换则引入了第三个维度，使元素能够在视觉上呈现出立体效果。 在CSS3中，2D变换主要包括以下几种： 1. **translate()**: 平移操作，可以使用...
css3 矩阵的使用详解
12-13
CSS3的矩阵变换是一种强大的工具，它允许开发者通过数学矩阵来执行复杂的2D和3D图形变换。在CSS中，`transform`属性结合`matrix()`函数可以实现元素的位置、缩放、旋转和斜切等效果。 ### CSS3矩阵变换基础 CSS3的...
CSS3D矩阵变换_casinoShelby_gamecenter_3_下载.zip
04-13
matrix3d()函数是一个4x4的矩阵，用于执行复杂的3D变换，包括平移、旋转、缩放和倾斜等操作。这个函数接受16个参数，每个参数对应矩阵中的一个元素。这16个参数可以按照以下顺序排列： ``` matrix3d(a, b, c, d, e,...
使用CSS3的scale实现网页整体缩放
12-02
今天学习了一下QQ邮箱的网页整体缩放效果，原来实现方法很简单，代码如下： 代码如下: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no”> <title>测试页面</title> <style type=”text/css”> div { width: 600px; text-align: center; font-size: 4em
CSS系列之2D转换
老__L的博客
02-27 1089
本文主要介绍CSS的transform、transform-origin属性。2D转换
CSS3------2D转换(transform属性)
qq_44193064的博客
04-21 386
1.2D转换对元素进行移动、缩放、转动、拉长或拉伸等操作 2.2D转换的方法有: 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵 translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素 translateX(n) 定义 2D 转换，沿着 X 轴移动元素 translateY(n) 定义 2D 转换，沿着 Y ...
CSS3：2D转换
李建雨的博客
11-07 195
1、移动translate transform：translate（X值 Y值），X、Y值为当前盒子的局部坐标系值，也可使用百分比书写。 当使用translale进行盒子的移动时，原来的位置将会被保留，即不脱标。 2、旋转rotate transform: rotate(45deg); 能够将盒子进行一定角度的旋转，函数名为rotate，函数值为旋转角度数值加上单位（deg）。 对盒子设置rotate进行旋转的时候，页面会保留它原来的位置，并且不会影响到其他盒子。 3、设置旋转中心点
html的2d旋转的函数是,CSS3 2D 转换
weixin_33047553的博客
06-30 377
CSS3 2D 转换CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。它是如何工作？变换的效果，让某个元素改变形状，大小和位置。您可以转换您使用2D或3D元素。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。Internet Explorer 10, Firefox, 和 Op...
【CSS3】2D/3D 转换函数
iuukai
07-28 362
文章目录2D 转换函数translate() 位移scale() 缩放skew() 倾斜rotate() 旋转3D 转换函数translate3d() 位移scale3d() 缩放rotate3d() 旋转 2D 转换函数 translate() 位移 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="t
css3转换transform 移动旋转缩放
qq_33878431的博客
11-23 1010
css3转换transform 移动旋转缩放 ###transform 在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate 1.rotate、scale、translate、skew ...
7：---（1）2D转换 （transform)-旋转
liu1992452008的博客http://write.blog.csdn.net/configu
07-19 371
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果   一：2D转换   （transform） CSS3变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值