专栏首页十月梦想css3动画变换transform用法

css3动画变换transform用法

刚才说到transition动画执行,接下来看下动画变换(transform),transform属性的取值4个

transform: rotate | scale | skew | translate

rotate(旋转):

rotate() :指定一个2D旋转,正数顺时针,负数逆时针旋转

执行图像的旋转,单位deg,50deg顺时针选择50度,-50deg逆时针旋转

translate(平移):

translate(x,y):设置移动效果,x表示水平方向,y表示数值方向,整数右,下,负数上左方向

scale(缩放)

scale(num1,num2):设置元素的缩放,num1表示水平的缩放比例,num2竖直缩放比例,1表示不变,1.2表示2倍,0.8表示0.8倍!

skew(扭曲):

扭曲效果 skew(30deg,60deg):图像扭曲效果,不同方位进行拉伸

transform-origi(元素基点位置):

transform-origin:设置旋转元素的基点位置 语法:transform-origin: 20% 40%;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery获取a标签中href值为空的连接,并提示信息

    在未上线的项目中,尤其前端开发过程中,挺频繁使用超链接,但是超链接点击之后会跳转当前的首页!(很烦心).

    十月梦想
  • css3 zoom属性兼容ie的缩放

    文本缩放,在之前我们使用过css3的transform中scale进行比例扩大或者缩放,但是这个属性兼容性差,在IE10一下基本就失效(蔫了),今天带来的zoo...

    十月梦想
  • vue列表渲染(数组和对象)

    我们知道这个vue是mvvm模型,数据改变,视图层就改变但是通过实例改变app.list[3]="新设置",发现数据改变了视图层无法改变,那么如何保持数据和视图...

    十月梦想
  • transform、transition方法详解及scale、zoom差异性说明

    使用skew方法来实现文字或图像的倾斜处理,在参数中分布指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

    奋飛
  • 人物|十年轮回

    TEG云端专业号
  • CentOS 7安装etcd和flannel实现docker跨物理机通信

    在搭建Kubernetes的环境的时候,你可能会遇到一些问题,不!你会遇到很多问题。比如,首先你要实现跨物理机的容器访问——是不同物理内的容器能够互相访问,而不...

    菲宇
  • 【Android 音视频开发打怪升级:OpenGL渲染视频画面篇】一、初步了解OpenGL ES

    提到OpenGL,想必很多人都会说,我知道这个东西,可以用来渲染2D画面和3D模型,同时又会说,OpenGL很难、很高级,不知道怎么用。

    开发的猫
  • python数据挖掘:能不能找出吃货最佳住宿点?

    这次我爬出了哈尔滨市TOP285家好吃的店,包括烧烤的TOP,饺子的TOP,酱骨的TOP等等等等,在地图上显示,规划热点,再用聚类算法计算下能不能找出吃货最佳的...

    机器学习AI算法工程
  • (2)SQL语句实现表的横向聚合

    经过sql查询后输出的结果集为:(字段后面增加聚合[最大值] [最小值] [>=5的值个数])

    跟着阿笨一起玩NET
  • 100倍加速!深度学习训练神器Determined AI宣布开源!更快,更简单,更强大

    作为一名深度学习科研人员,小编我可是深受模型训练的困扰:一个模型要跑几天几夜,结果最后发现有一步错了 ...从头再来

    新智元

扫码关注云+社区

领取腾讯云代金券