资讯专栏INFORMATION COLUMN

CSS3 transform 详解

wing324 / 2610人阅读

摘要:最近在做,发现还是对了解的不是特别深刻,这里做一个总结。是以当前元素的中心为重心旋转顺时针开始。就是普通的状态将会倒置含义倾斜单位用法以自身元素为基础值为正数时向右倾斜值为负数时向左倾斜特殊值视觉上元素消失。

最近在做H5,发现还是对transform了解的不是特别深刻,这里做一个总结。

CSS3 transform

transform的含义是:改变,使…变形;转换

CSS3 transform都有哪些常用属性
rotate()
// 旋转

skew()
// 倾斜

scale()
// 缩放

translate(,)
// 变动, 位移

transform:rotate():

含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。
是以当前元素的中心为重心,旋转顺时针开始。0deg就是普通的状态,180deg将会倒置

transform : skew():

含义:倾斜
单位:deg
用法:以自身元素为基础,值为正数时向右倾斜skew(44deg),值为负数时向左倾斜(-44deg)
特殊值:-90deg,90deg,视觉上元素消失。180deg,-180deg恢复。一次类推

transform:scale():

含义:比例
单位:无
用法: 值为正数value>1时按照数值比例放大transform:scale(1.5),
值为正数0时按照数值比例缩小transform:scale(0.5),
值为负数时:-1< value <0 时,同样缩小|value|并且rotate(180deg),
值为负数时:value < -1时,放大|value|并且rotate(180deg)

transform:translate(x,y):

含义: 变动,位移
单位: px(rem)
用法: 把目标元素中点理解为平面坐标系的(0px,0px),所有的操作全部基于(0,0)起始点。

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

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

相关文章

  • css3动画属性详解transform、transition、animation

    摘要:动画属性详解关于制作动画的几个属性变形转换和动画。一属性旋转中心为原点扭曲倾斜缩放移动矩阵变形。各个属性的用法旋转其中表示度。承载动画的另一个属性。定义动画的名称。一个或多个合法的样式属性。 css3动画属性详解: 关于CSS3制作动画的几个属性:变形(transform)、转换(transition)和动画(animation)。 一、transform 属性: 旋转rotate(中...

    Riddler 评论0 收藏0
  • CSS3 」动画详解

    摘要:规定动画的名称。规定动画是否在下一周期逆向地播放。定义动画各个阶段的状态的代码段。动画的周期时间。动画的循环次数。动画完成后,元素保持动画最后的状态。重要提示请不要忘记推荐和收藏搜索动画详解 CSS3 提供给了我们非常多的转换函数: 2D: translate, rotate, scale, skew. 3D: translate3d, rotate3d, scale3d, skew...

    weij 评论0 收藏0
  • 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

    摘要:仅仅使用作为身体的布局,用的各种和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。有的同学说,用不是能画得更逼真而且更简单吗这点我也非常赞同,但我的理由还是,那就没意思了。这次写的详细一点,把各个部位都拆出来分析。收工欢迎大家吐槽 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。那就没意思了。有的同学说,用c...

    Codeing_ls 评论0 收藏0
  • 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

    摘要:仅仅使用作为身体的布局,用的各种和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。有的同学说,用不是能画得更逼真而且更简单吗这点我也非常赞同,但我的理由还是,那就没意思了。这次写的详细一点,把各个部位都拆出来分析。收工欢迎大家吐槽 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。那就没意思了。有的同学说,用c...

    mayaohua 评论0 收藏0

发表评论

0条评论

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