[游戏开发]【动画】实现旋转和平移效果

这篇文章主要介绍css3实现平移效果(transfrom：translate)、实现旋转效果（animation）示例，对大家的学习或者工作具有一定的参考学习价值。

1、循环动画：相关文章
https://www.cnblogs.com/xiaohuochai/p/5419236.html

https://www.cnblogs.com/tianma3798/p/15334830.html 平移动画
注意：使用此循环动画，iOS手机上的下拉刷新不兼容，下拉会出现一直闪的情况，不满足开发需求。

2、解决办法及实现：可以实现iOS和安卓手机兼容，满足开发需求。

<style lang="stylus" scoped>
.shadow1
  box-shadow 0rpx 0rpx 15rpx 0rpx rgba(0,0,0,.1)
.fade-open
  position absolute
  top 0
  left 0
  animation top-move 1s

@keyframes top-move
  0%
    top -536rpx
  100%
    top -58rpx
.fade-close
  position absolute
  bottom  0
  left 0
  animation bottom-move .3s

@keyframes bottom-move
  0%
    top -58rpx
  100%
    top -536rpx
.nodes-bg
  background-color #11d7d1
.nodes-bg1
  background-color #efefef
.nodes-bg2
  background linear-gradient(57deg,#22ebad 0%, #11d7d1 100%)
.yuanjiao
  transform translateY(0)

.fade-obg
  display block
  animation rotate 13s linear infinite

@keyframes rotate
  0%
    transform rotateZ(0deg)
  100%
    transform rotateZ(360deg)

.fade-1
  display block
  animation rotate1 1s linear infinite

@keyframes rotate1
  0%
    transform rotateZ(360deg)
  100%
    transform rotateZ(0deg)

.fade-2
  animation runOne 18s linear infinite

@keyframes runOne
  from
    transform translate(0)
  to
    transform translate(750rpx)

.fade-3
  animation runOne3 18s linear infinite

@keyframes runOne3
  from
    transform translate(0)
  to
    transform translate(1050rpx)

.fade-4
  display block
  animation rotate4 10s linear infinite

@keyframes rotate4
  0%
    transform rotateZ(0deg)
  100%
    transform rotateZ(360deg)
</style>

3、效果

4.扩展与学习

语法

`

• /* Keyword values */
• transform: none; //定义不进行转换
• /* Function values */
• transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); //定义 2D 转换，使用六个值的矩阵。
• transform: translate(12px, 50%); //定义 2D 转换。
• transform: translateX(2em); //定义转换，只是用 X 轴的值
• transform: translateY(3in); //定义转换，只是用 y 轴的值
• transform: scale(2, 0.5); //定义 2D 缩放转换。
• transform: scaleX(2); //通过设置 X 轴的值来定义缩放转换。
• transform: scaleY(0.5);//通过设置 Y 轴的值来定义缩放转换。
• transform: rotate(0.5turn);//定义 2D 旋转，在参数中规定角度。
• transform: skew(30deg, 20deg);//定义沿着 X 和 Y 轴的 2D 倾斜转换。
• transform: skewX(30deg);//定义沿着 X 轴的 2D 倾斜转换。
• transform: skewY(1.07rad);//定义沿着 Y 轴的 2D 倾斜转换
• transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);//定义 3D 转换，使用 16 个值的 4x4 矩阵。
• transform: translate3d(12px, 50%, 3em);//定义 3D 转换。
• transform: translateZ(2px);//定义 3D 转换，只是用 Z 轴的值。
• transform: scale3d(2.5, 1.2, 0.3);//定义 3D 缩放转换。
• transform: scaleZ(0.3);//通过设置 Z 轴的值来定义 3D 缩放转换。
• transform: rotate3d(1, 2.0, 3.0, 10deg);//定义 3D 旋转。
• transform: rotateX(10deg);//定义沿着 X 轴的 3D 旋转。
• transform: rotateY(10deg);//定义沿着 Y 轴的 3D 旋转。
• transform: rotateZ(10deg);//定义沿着 Z 轴的 3D 旋转。
• transform: perspective(17px);//为 3D 转换元素定义透视视图。
• /* Multiple function values */
• transform: translateX(10px) rotate(10deg) translateY(5px);
• /* Global values */ css关键字
• transform: inherit; //从父元素继承该属性。
• transform: initial; //设置该属性为它的默认值
• transform: unset; //不设置
  `