ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css3 2D转化

2021-10-17 11:58:48  阅读:194  来源: 互联网

标签:css3 转化 scale alternate transform keyframes 2D animation 默认


css3 2d转化
平移 默认水平
transform:translate()单位px
transform:translateX()
transform:translateY()
transform:translate(X,Y)
缩放 默认水平
transform: scale()没单位
transform: scaleX()
transform: scaleY()
transform: scale(X,Y)
旋转
transform: rotate(单位deg)
transform: rotateX()
transform: rotateY()
倾斜默认水平
transform: skew(单位deg)
transform: skewX()
transform: skewY()
定位原点
transform-origin:left top center bottom right
复合写先要平移再旋转
动画
1@keyframes 名字{
    from(开始){
    }
    to(结束){
    }
 }
2@keyframes 名字{    (0%-100%)
    0%{
    }
    25%{
    }
}
使用animation:动画名 持续时间 持续时间 类型 循环次数(infinite/normal)运动方向(reverse[反向运动]/alternate[先正再反]/alternate-reversel[先反再正])
animation-play-state:running、paused暂停

标签:css3,转化,scale,alternate,transform,keyframes,2D,animation,默认
来源: https://blog.csdn.net/YH_HHHHHH/article/details/120809285

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有