8.HTML5 CSS3 变形与动画相关属性

来源：互联网发布：淘宝的直通车怎么开编辑：程序博客网时间：2024/05/29 18:35

1. CSS3提供的对变形的支持

transform

translate（tx，[ty]）

translateX（tx）：横向上位移

translateY（ty）：纵向上位移

scale(sx，[sy])：缩放

scaleX(sx)

scaleY（sy）

rotate（angle）：顺时针旋转

skew（sx，[sy]）：沿着X，Y轴倾斜度数。

skewX（sx）

skewY（sy）

matrix（m11,m12,m21,m22,dy,dy）

transform-origin（xCenter,yCenter）变形的中心点。

left
top
right
bottom
center
长度值
百分比

1.1 四种基本变形

<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 变形 </title><style type="text/css">div {display: inline-block;width: 60px;height: 60px;background-color: #bbb;border: 2px solid black;margin: 20px;}</style></head><body><div>文字</div> 未变形 <div>文字</div><br/><div>文字</div> 旋转30度 <div style="-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);">文字 </div><br/><div>文字</div> 位移120px,-80px <br/> <div style="-moz-transform:translate(120px,-80px);-webkit-transform:translate(120px,-50px);-o-transform:translate(120px,-80px);">文字</div><br/><div>文字</div> 缩放1.9, 0.4 <div style=" -moz-transform:scale(1.9,0.4);-webkit-transform:scale(1.9,0.4);-o-transform:scale(1.9,0.4);">文字</div><br/><div>文字</div> 缩放0.8, 2.1 <div style="-moz-transform:scale(0.8, 2.1);-webkit-transform:scale(0.8, 2.1);-o-transform:scale(0.8, 2.1);">文字</div><br/><div>文字</div> 横向倾斜30度 <div style="-moz-transform:skew(30deg);-webkit-transform:skew(30deg);-o-transform:scaleskew(30deg);">文字</div><br/><div>文字</div> 纵向倾斜30度 <div style="-moz-transform:skewY(30deg);-webkit-transform:skewY(30deg);-o-transform:skewY(30deg);">文字</div><br/></body></html>

1.2 同时应用多种变形

<body><div>文字</div><div style="-moz-transform:rotate(30deg) translate(260px, 60px) scale(2.4,0.4);-webkit-transform:rotate(30deg) translate(120px, 80px) scale(2.4,0.4);-o-transform:rotate(30deg) translate(120px,80px) scale(2.4,0.4);">文字</div></body>

<div>文字</div><div style="-moz-transform:translate(260px, 60px) rotate(30deg) scale(2.4,0.4);-webkit-transform:translate(120px, 80px) rotate(30deg) scale(2.4,0.4);-o-transform:translate(120px,80px) rotate(30deg) scale(2.4,0.4);">文字</div></body>

1.3 指定变形中心点

<div class="a">未变换之前</div><div class="a"style="-moz-transform-origin:left top;-moz-transform:rotate(-25deg);-webkit-transform-origin:left top;-webkit-transform:rotate(-25deg);-o-transform-origin:left top;-o-transform:rotate(-25deg);">左上角为变换中心</div><div class="b">未变换之前</div><div class="b"style="-moz-transform-origin:right bottom;-moz-transform:rotate(65deg);-webkit-transform-origin:right bottom;-webkit-transform:rotate(65deg);-o-transform-origin:right bottom;-o-transform:rotate(65deg);">右下角为变换中心</div><div class="c">未变换之前</div><div class="c"style="-moz-transform-origin:right center;-moz-transform:rotate(-90deg);-webkit-transform-origin:right center;-webkit-transform:rotate(-90deg);-o-transform-origin:right center;-o-transform:rotate(-90deg);">右边界的中间为变换中心</div>

1.4 使用矩阵变换

matrix(m11,m12,m21,m22,x,y)

{X,Y}={M11,M12M12,M22}={X * M11 + Y *M21 +X * M12 + Y * M22}

<body><div class="a">未变换之前</div><div class="a"style="-moz-transform-origin:left top;-moz-transform:matrix(1, 0, 0, 1, 80px, -30px);-webkit-transform-origin:left top;-webkit-transform::matrix(1, 0, 0, 1, 80px, -30px);-o-transform-origin:left top;-o-transform::matrix(1, 0, 0, 1, 80px, -30px);">左上角为变换中心,仅仅位移</div><div class="b">未变换之前</div><div class="b"style="-moz-transform:matrix(1.5, 0, 0, 0.6, 0px, 0px);-webkit-transform::matrix(1.5, 0, 0, 0.6, 0px, 0px);-o-transform::matrix(1.5, 0, 0, 0.6, 0px, 0px);">缩放1.5, 0.6</div></body>

2.CSS3提供的Transition动画

2.1 多个属性同时渐变

2.2 指定动画速度

3. CSS3提供的Animation动画

3.1 同时改变多个属性的动画

3.2 鱼眼效果

0 0