美文网首页
transform 2d 3d使用

transform 2d 3d使用

作者: 郭郭呐 | 来源:发表于2018-10-12 13:33 被阅读0次

1. transform: translate(300px,200px);位移

  transform:  css3变换(位移、缩放、转动、拉长或拉伸) translate()  2d平移

  给一个像素值 就代表 x轴偏移 y默认为0  支持正负值

2. transform:rotate(n deg) 旋转    单位:角度(度数) deg 支持正负值

   rolateX/Y/Z 配合perspective 开启3D模式  perspective 设置在body上(perspective=500;

3. transform: scale(X ,Y);扩大 缩放        一个值为x y轴同时变化

4. transform: skew(45deg) 斜切

5.transform-origin: 20px 40px; 可以改变轴心点

想用效果更明显可以用一个过渡:transition: property duration timing-function delay;

transition-property 指定CSS属性的name,transition效果

transition-duration transition效果需要指定多少秒或毫秒才能完成

transition-timing-function 指定transition效果的转速曲线

transition-delay   定义transition

相关文章

  • css3动画

    transform 功能:向元素应用2D或3D转换语法:transform:none|transform-func...

  • CSS3入门之2D、3D、过度、动画

    2D 3D 过度 动画 2D效果 主要是平面的一些常规操作 transform属性 移动 transform: ...

  • css动画

    css3动画 过渡:transition 2D 转换 transform 3D 转换 transform 动画:a...

  • 11.20-补充

    translate:transform:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对...

  • transform

    属性transform 向元素应用 2D 或 3D 转换。transfo...

  • transform形变属性

    思路: 归纳transform的用法 延生到2D、3D方面

  • 网易云课堂前端学习-css-变形-transform

    变形包括2d变形和3d变形 transform2D变形 transform(none| +),可以写多个方法一起但...

  • Rect Transform&&Transform

    Rect Transform在2D的UI中,对应于3D的Transform。用于显示调整2DUI中的缩放比例、位...

  • css 动画总结

    一、2D、3D 转换 (transform) 让元素在一个坐标系统中变形 2D转换 translate(x,y) ...

  • transform变换

    transform变换 1. 变换属性 transform 变换分为2D变换和3D变换,描述的是一种变化之后的结果...

网友评论

      本文标题:transform 2d 3d使用

      本文链接:https://www.haomeiwen.com/subject/zzawaftx.html