ItAnswer

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 3503|回复: 0

CSS3 2D 转换

[复制链接]

7

主题

7

帖子

1036

积分

金牌会员

Rank: 6Rank: 6

积分
1036
发表于 2020-12-29 09:54:42 | 显示全部楼层 |阅读模式
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

它是如何工作?
转换的效果是让某个元素改变形状,大小和位置。
您可以使用 2D 或 3D 转换来转换您的元素。
鼠标移动到以下元素上,查看 2D 和 3D 的转换效果:
代码实例 复制到html中展示
  1. <div style="height:80px;">
  2.     <div onmouseover="rotateDIV()" id="rotate2D" style="transform: rotate(180deg);">2D 转换</div>
  3.     <div onmouseover="rotateYDIV()" id="rotate3D" style="transform: rotateY(360deg);">3D 转换</div>
  4. </div>
  5. <style>
  6.     #rotate2D,#rotate3D {
  7.         width:80px;
  8.         height:70px;
  9.         color:white;
  10.         position:relative;
  11.         font-weight:bold;
  12.         font-size:15px;
  13.         padding:10px;
  14.         float:left;
  15.         margin-right:50px;
  16.         border-radius:5px;
  17.         border:1px solid #000000;
  18.         background:red;
  19.         margin:10px;
  20.     }
  21. </style>
  22. <script>
  23.     <!--
  24.     var x,y,n=0,ny=0,rotINT,rotYINT
  25.     function rotateDIV()
  26.     {
  27.         x=document.getElementById("rotate2D")
  28.         clearInterval(rotINT)
  29.         rotINT=setInterval("startRotate()",10)
  30.     }
  31.     function rotateYDIV()
  32.     {
  33.         y=document.getElementById("rotate3D")
  34.         clearInterval(rotYINT)
  35.         rotYINT=setInterval("startYRotate()",10)
  36.     }
  37.     function startRotate()
  38.     {
  39.         n=n+1
  40.         x.style.transform="rotate(" + n + "deg)"
  41.         x.style.webkitTransform="rotate(" + n + "deg)"
  42.         x.style.OTransform="rotate(" + n + "deg)"
  43.         x.style.MozTransform="rotate(" + n + "deg)"
  44.         if (n==180 || n==360)
  45.         {
  46.             clearInterval(rotINT)
  47.             if (n==360){n=0}
  48.         }
  49.     }
  50.     function startYRotate()
  51.     {
  52.         ny=ny+1
  53.         y.style.transform="rotateY(" + ny + "deg)"
  54.         y.style.webkitTransform="rotateY(" + ny + "deg)"
  55.         y.style.OTransform="rotateY(" + ny + "deg)"
  56.         y.style.MozTransform="rotateY(" + ny + "deg)"
  57.         if (ny==180 || ny>=360)
  58.         {
  59.             clearInterval(rotYINT)
  60.             if (ny>=360){ny=0}
  61.         }
  62.     }
  63.     //-->
  64. </script>
复制代码
2D 转换
在本章您将了解2D变换方法:
  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()
在下一篇文章中您将了解3D转换。
实例
  1. div{
  2. transform: rotate(30deg);
  3. -ms-transform: rotate(30deg); /* IE 9 */
  4. -webkit-transform: rotate(30deg); /* Safari and Chrome */
  5. }
复制代码
translate() 方法
translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
实例
  1. div
  2. {
  3. transform: translate(50px,100px);
  4. -ms-transform: translate(50px,100px); /* IE 9 */
  5. -webkit-transform: translate(50px,100px); /* Safari and Chrome */
  6. }
复制代码
translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。
rotate() 方法
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
实例
  1. div
  2. {
  3. transform: rotate(30deg);
  4. -ms-transform: rotate(30deg); /* IE 9 */
  5. -webkit-transform: rotate(30deg); /* Safari and Chrome */
  6. }
复制代码
rotate值(30deg)元素顺时针旋转30度。
scale() 方法scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
实例
  1. -ms-transform:scale(2,3); /* IE 9 */
  2. -webkit-transform: scale(2,3); /* Safari */
  3. transform: scale(2,3); /* 标准语法 */
复制代码
scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。skew() 方法语法
  1. transform:skew(<angle> [,<angle>]);
复制代码
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
  • skewX(<angle>);表示只在X轴(水平方向)倾斜。
  • skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
实例
  1. div
  2. {
  3. transform: skew(30deg,20deg);
  4. -ms-transform: skew(30deg,20deg); /* IE 9 */
  5. -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
  6. }
复制代码
skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
matrix() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
实例
利用matrix()方法旋转div元素30°
  1. div
  2. {
  3. transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  4. -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
  5. -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
  6. }
复制代码
新转换属性
以下列出了所有的转换属性:
Property
描述
CSS
transform适用于2D或3D转换的元素3
transform-origin允许您更改转化元素位置3
2D 转换方法
函数
描述
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 轴。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ITAnswer ( 陕ICP备14007217号 )

GMT+8, 2024-3-29 06:43 , Processed in 0.014084 second(s), 23 queries .

Powered by ITAnswer! X3.4

Copyright © 2013-2020, Tencent Cloud.

快速回复 返回顶部 返回列表