过渡、2D 变形


过渡 transition(zoom不支持transition)

transition-property 指定可以过渡的属性,默认值为all:表示需要过渡的所有属性,可以指定具体属性
transition-duration 过渡完成需要的时间,单位是s(秒),是不能省略的属性
transition-timing-function 过渡的动画类型,默认值为ease,还有ease-in,ease-out,ease-in-out,linear,贝塞尔曲线cubic-bezier(), 帧step()

image.png

transition-delay 延迟执行过渡的时间,单位是秒,默认值为0是;

2D变形 transform

translate

transform: translateX()在X轴上偏移的距离
transform: translateY()在Y轴上偏移的距离
transform: translate() 一个值,默认X轴上的偏移量
transform: translate(x, y)两个值,在X轴和Y轴上的偏移量

scale

transform: scaleX() X轴上的缩放比例
transform: scaleY() Y轴上的缩放比例
transform: scale() 整体的缩放比例 可以设置负数
使用场景:设置小于12px的字体

rotate

transform: rotate() 2D旋转,绕中心点旋转,正数时顺时针旋转,负数时逆时针旋转。

transform-origin 变形的参照点的位置,一个值默认X轴方向的参照点,两个值X轴和Y轴方向上的参照点。

skew

transform: skewX() 绕Y轴发生倾斜
transform: skewY() 绕X轴发生倾斜
transform: skew(x, y) 绕X轴和Y轴发生倾斜

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,812评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,346评论 0 11
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,896评论 0 4
  • 1.css3的渐变,分为线性渐变和径向渐变,下面举例说明 1.1线性渐变写法是linear-gradient如下图...
    你的言语我爱听却不懂阅读 687评论 0 0
  • 一 小时候,村子后边有一个很大很大的鱼塘,塘里的水清澈的能看得到小鱼活泼的身影,岸边...
    青杏路涂阅读 232评论 1 3