CSS3变形与动画上

最新推荐文章于 2023-02-15 20:10:46 发布

cysear

最新推荐文章于 2023-02-15 20:10:46 发布

阅读量826

点赞数

分类专栏： CSS3 文章标签：动画 css3 变形 matrix rotate

本文链接：https://blog.csdn.net/cysear/article/details/47318509

版权

CSS3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、CSS3变形

1.变形——旋转rotate()

transform:rotate(-20deg);/*   以自己中心点为旋转中心，顺时针+逆时针-       */

2.变形——扭曲skew()

transform:skew(-45deg);

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

4、skew(x)使元素在水平方向扭曲（Y轴默认为0）

3.变形——缩放scale()

transform: scale(0.8,0.8);

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

4、 scale(X)使元素水平方向缩放（Y轴默认为0）

4.变形——位移translate()

transform:translate(-50%,-50%);

1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(y)仅垂直方向移动（Y轴移动）

4、translate(x)水平方向移动（Y轴默认为0）

5.变形——矩阵matrix()

transform: matrix(1,0,0,1,50,50);  /*通过matrix()函数来模拟transform中translate()位移的效果。*/

可以忽略前四个参数，后面两个参数代表位移。

matrix(1,0,0,1,20,30)偏移
此时前四个不变，后两个是偏移，比如向右下偏移20,30

matrix(1,0,0,1,20,30)缩放
此时两个1是缩放比例，matrix(sx, 0, 0, sy, 0, 0)等同于scale(sx, sy);

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)旋转

此时后两个不变，前四个是旋转，比如旋转45度，则sinθ=√2/2

matrix(1,tan(θy),tan(θx),1,0,0)拉伸
此时两个正切值是轴倾斜角度x' = x+y*tan(θx)+0 = x+y*tan(θx) 
y' = x*tan(θy)+y+0 = y+x*tan(θy)
对应于skew(θx + "deg"，θy+ "deg")

详解：http://blog.csdn.net/cysear/article/details/47317323

6.变形——原点transform-origin

transform-origin: top right;

二、CSS3动画

transition是一个复合属性，包括7,8,9,10

7动画——过渡属性transition-property

8.动画——过渡所需时间transition-duration

9.动画——过渡函数transition-timing-function

10.动画——过渡延迟时间transition-delay

动画小例子

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<style type="text/css">
.wrapper {
  width: 400px;
  height: 200px;
  margin: 20px auto;
  border: 2px dotted red;
  position:relative;
}


.wrapper div {
  padding: 15px 20px;
  color: #fff;
  background-color: orange;
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition: all .5s ease-in .2s;
  transition: all .5s ease-in .2s;
}


.wrapper div:hover {
  background-color: red;
  border-radius: 10px;
}
</style>
</head> 
<body>
<div class="wrapper">
  <div>鼠标放到我的身上来</div>
</div>

</body>
</html>

cysear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3变形与动画上

一、CSS3变形1.变形——旋转rotate()transform:rotate(-20deg);/* 以自己中心点为旋转中心，顺时针+逆时针- */2.变形——扭曲skew()transform:skew(-45deg);1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）2、skewX(x)仅使元素在水
复制链接

扫一扫

专栏目录