首先是  transform 属性：

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

加上对应属性则可得到3D透视效果下的形态

本次以圆形（或图片）元素为例：

1. 父元素添加属性

#app{
    width:200px;
    height:200px;
    position: absolute;
    transform:  rotateZ(90deg) rotateX(0deg) rotateY(70deg); /**添加透视3d属性/
   /* rotateZ(90deg) 使元素沿Z轴旋转90度 可以简单理解为放平*/
}
 
rotateZ 60deg

rotateX它可以让一个元素围绕横坐标(水平轴)旋转,

rotateY(70deg) 让元素绕y轴旋转

注意:如果单独使用某个属性与同时使用某个属性效果会不同

2.子元素使用animation定义动画

img{
    width:200px;
    height:200px;
    position:relative;
    animation:3s myrotate linear infinite normal; /*动画名称 动画时间 动画速度 动画延迟 */
}

3.定义@keyframes动画规则

旋转

@keyframes myrotate{
    0% {
      transform :rotateZ(0deg);
    }
    100% {
      transform :rotateZ(360deg);
    }
} 
移动
@keyframes mymove{
from {
  transform :translate(0%);
}
to {
  transform :translate(100%);
}
} 
备注：

scale 缩放
rotate 旋转
skew倾斜
translate 移动

animation 与Transition不同的是：
1.Animation可以通过keyframe显示控制当前帧的属性值，而Transition只能隐式来进行（不能指定每帧的属性值），所以相对而言Animation的功能更加灵活。
2. Animation通过模拟属性值改变来实现动画，动画结束之后元素的属性没有变化；而Transiton确实改变了元素的属性值，动画结束之后元素的属性发生了变化；这一点，这在实际应用中会产生很大的区别。

最新文章

  1. kafka
  2. java关于ArrayList中toArray方法的使用
  3. Win7下共享WiFi热点方法
  4. 移动开发框架，Hammer.js 移动设备触摸手势js库
  5. 关于Excel导入导出的用例设计
  6. C++ malloc new 的区别
  7. webclient乱码问题
  8. 信息安全实验四：information-security
  9. Android设置全屏
  10. 使用 curl 进行 ssl 认证
  11. luogu P1613 跑路
  12. dubbo入门学习笔记之入门demo(基于普通maven项目)
  13. 搭建SpringBoot+dubbo+zookeeper+maven框架（三）
  14. 带jdk15类似的jar配置
  15. BZOJ.4767.两双手(组合 容斥 DP)
  16. SpringBoot-整合@transactional注解
  17. spring cloud 之 Feign 使用HTTP请求远程服务
  18. Beginning SDL 2.0(6) 音频渲染及wav播放
  19. Internet History, Technology and Security (Week 4)
  20. 一致性hash 大众点评订单分库分表实践

热门文章

  1. linux more 命令的基础实现。
  2. Java面向对象之 接口： [修饰符] interface 接口名 {...}；子接口：[修饰符] interface 接口名 extends 父接口，父接口2...{...}
  3. awk 循环过滤EPC脚本
  4. myeclipse 安装spket
  5. ligerui的jquery.validate验证需要添加validate="{required:true,minlength:8,equalTo:'#newpassword'}"
  6. 8-1yum私有云仓库
  7. SpringBoot整合kafka的简单应用及配置说明
  8. Intellij IDEA中Springboot启动报Command line is too long错误
  9. Excel转Json升级版-Python
  10. 【LeetCode】368. Largest Divisible Subset 解题报告（Python）