资讯专栏INFORMATION COLUMN

transform

ephererid / 1936人阅读

摘要:参考一变形原点变形原点,默认值为中心位置的值可以为百分值,默认值二旋转三移动四缩放五扭曲基点,默认值

参考:https://blog.csdn.net/qq_2418...

一、变形原点

transform-origin(X,Y)变形原点,默认值为中心位置
(-webkit-,-moz-,-o-)
x,y的值可以为百分值,em,px
x → left,center,right
y → top,center,bottom

top left|left top ==> 0 0

top|top center| center top ==>50% 0

left|left center|center left ==>0 50%

center| center center ==>50% 50%(默认值)

right|right center|center right ==>100% 50%

bottom|bottom center|center bottom ==>50% 100%

bottom left|left bottom ==>0 100%

bottom right|right bottom ==>100% 100%

transform-origin(25%,75%)

二、旋转rotate
transform:rotate(30deg)

三、移动translate
transform:translate(100px 20px)

四、缩放scale
transform:scale(2,1.5)

五、扭曲skew
transform:skew(30deg,10deg)
基点:transform-origin(50%,50%)默认值

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117175.html

相关文章

  • 深入node之Transform

    摘要:内部架构上图表示一个实例的组成部分部分缓冲数组内部函数部分缓冲链表内部函数实例必须实现的内部函数以及系统提供的回调函数。有三个参数,第一个为待处理的数据,第二个为编码,第三个为回调函数。 Transform流特性 在开发中直接接触Transform流的情况不是很多,往往是使用相对成熟的模块或者封装的API来完成流的处理,最为特殊的莫过于through2模块和gulp流操作。那么,Tra...

    williamwen1986 评论0 收藏0
  • css3变形动画的一些基础知识

    摘要:指定完成过渡所需的时间,完成一次动画所需时间指定过渡函数,动画播放方式指定开始出现的延迟时间,如果没有延迟我们可以用或者直接不写。第一种第二种第三种被称为关键帧,其类似于中的关键帧。表示动画在结束后继续应用最后的关键帧的位置。 transform rotate(180deg)2D旋转正值代表顺时针旋转180度,负值代表逆时针旋转,用法transform:rotate(180deg);...

    gghyoo 评论0 收藏0
  • [学习交流]博客园 cnblog 添加github链接和自定义美化学习

    2018.12.30更新 --------------------------------------------------------------------分割线--------------------------------------------------------------------------------- 认识博客园的组件 选择皮肤:设置-博客设置-(该皮肤为简洁) 下面...

    番茄西红柿 评论0 收藏0
  • 编写自己的代码库(css3常用动画的实现)

    摘要:前言在月初的时候,发了热身实战过渡与动画实现炫酷下拉,手风琴,无缝滚动。的代码库也发过两次,两篇文章。之前也说过,我写文章的目的是授人以渔,不是授人以鱼。难的是动画的一些编写,这个需要创意,大家可以上网参考。 1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既然热身完了,是时候...

    cpupro 评论0 收藏0
  • CSS3 变换

    摘要:概览变换也叫转换,主要包括以下几种旋转扭曲缩放和移动以及矩阵变形。变换没有扭曲操作,有移动,旋转,缩放。三,取消的变换,将变换应用到上并置于缩放前,改变缩放值,没有任何变化。 概览 CSS3 变换也叫 2D/3D转换,主要包括以下几种:旋转(rotate) 、扭曲 (skew) 、缩放(scale) 和 移动(translate) 以及 矩阵变形(matrix) 。transform ...

    wayneli 评论0 收藏0
  • javax.crypto.Cipher 源码学习笔记

    摘要:源码学习笔记该类是用来加密的引擎类,支持对称和非对称加密。函数创建对象操作其中方法是在中操作的方法,其他几个都使用执行。状态变化内部类内部类是用来解析中传入的字符串的。查询时,也会查询别名是否等于。知其然知其所以然。 javax.crypto.Cipher 源码学习笔记 该类是JCE用来加密的引擎类,支持对称和非对称加密。该类的介绍可以参考:[[译]JCA参考指南(二):核心类和接口]...

    余学文 评论0 收藏0

发表评论

0条评论

ephererid

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<