css3 动画详解

时间：2021-09-01 20:52:37 收藏：0 阅读：25

transform

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

来个例子记录一下

正常的div

这些值表示以下函数:

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

css
.tf1{
     transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
    }

html
 <div class="tf"> Transformed </div>

技术分享图片

CSS 属性 translate 允许你单独声明平移变换，并独立于 transform 属性。这在一些典型的用户界面上更好用，而且这样就无需在 transform 中声明该函数并记住转换函数的确切顺序了。

技术分享图片

之前

技术分享图片

技术分享图片

变化之前

技术分享图片

变化之后

技术分享图片

技术分享图片

技术分享图片

6、

原文：https://www.cnblogs.com/pikachuworld/p/15212806.html