CSS3动画效果--2D
更新时间：2020-08-28 04:16:50 来源： 阅读量：
【摘要】 CSS3动画效果--2D考必过小编为大家整理了关于CSS3动画效果--2D的信息，希望可以帮助到大家！
CSS3动画效果--2D
标签：tran第一个nsf动画效果formfontros效果知识点
知识点一：旋转
transform: rotate(180deg) //只能传一个参数，，正值是顺时针 负值是逆时针
度数用deg表示
沿着x轴旋转：
transform: rotateX(180deg);
沿着Y轴旋转：
transform: rotateY(180deg);
默认是沿着中心旋转。。。
改变中心轴旋转位置
transform-origin: top left; //沿着左上角旋转 transform-origin: 100px 200px; //沿着坐标那个点旋转
和上一个配合使用，有两种形式写参数
知识点二：倾斜
transform: skew(x,y); transform: skewX(x); transform: skewY(y);
可以传两个参数：第一个是x轴的偏移，，角度是与y轴的夹角
第二个是Y轴的偏移，，角度是与X轴的夹角
围绕圆心旋转
改变旋转轴位置： transform-origin： top right; //同上
知识点三：平移
transform: translate(x,y); x轴距离 y轴距离 可以为正负值
平移没有origin属性 ，，因为是整体平移
知识点四：缩放
transform： scale(n); transform: scale(x,y);
一个参数时 ： n表示数字，0-1之间是缩放的，正常值是1，，，比1 大的就是放大
两个值时，一个是X位置，一个是Y位置
有origin属性，，，同上上上。。。。。。。。
CSS3动画效果--2D
标签：tran第一个nsf动画效果formfontros效果知识点
以上就是CSS3动画效果--2D的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！