1.实现元素位移效果 
语法:transform:translate(x轴水平移动距离,Y轴垂直移动距离)
取值:正负都可以
取值方式:数字+px
百分比 :参照自己本的盒子的百分比 比如:本身自己的宽度是100px 那么x轴的百分之100,则走的是100px
使用写法:
transform:translate(100px,50px);/*向右移动100px,向下移动50px*/
transform:translate(-100px,500px); /*向左移动100px,向上移动50px*/
transform:translate(100%,50%) /*沿着x轴自身的走100%像素,Y轴的50%像素*/
   transform:translate(100px)相当于transform:translateX(100px); /*沿着x轴走100px*/
transform:translateY(100px); /*沿着Y轴移动100px*/

2.rotate实现元素旋转效果

语法:transform:rotate(角度);/*280deg 即是280度,此值正负数都可以*/

注意:必须要有过度过程:transtion:all 1s;整数值是顺时针旋转,负数值是逆时针旋转

2.2 修改以什么为旋转点(默认为中心)

语法:transform-origin:取值;

取值可以为:方位名词、百分比、数字+px

方位名词:left,top,right,bottom

例如:transform-origin:left bottom;  /*围绕左下角旋转*/

3.scale修改元素的尺寸

语法:tranform:scale(x轴缩放倍数,y轴缩放倍数)

特点:是从中心点放大缩小

注意:1.建议只是用x轴或者y轴其中一个,让其等比例缩放

2.数字等于1不变,小于1缩小,大于1放大

注意:注意:注意:重要的话说三遍!tranform 对行内标签无效

最新文章

  1. NOIP模板整理计划
  2. jQuery动画slideUp()不正常位移原因
  3. MyBatis中关于别名typeAliases的设置
  4. ListView.setAdapter(adapter);空指针异常的解决的总结
  5. java连接数据库步骤
  6. pom.xml详解
  7. crontab不能正确执行的问题
  8. 关于消除if-else的简单总结
  9. RobotFramework-关键字
  10. c++多线程崩溃错误1
  11. Log4Net 使用总结
  12. Servlet 基础知识
  13. iOS OC利用imageview属性切出类似圆柱图形
  14. ISE14.7兼容性问题集锦
  15. 学习笔记TF058:人脸识别
  16. mongo 数据库
  17. Python——数组模块(array)
  18. 一个小时就能理解Java的NIO必须掌握这三大要素!
  19. Tomcat以Daemon的方式启动(CentOS6&7)
  20. 黄聪:PHP数据库连接失败--could not find driver 解决办法

热门文章

  1. SpringBoot(4):整合Mybatis
  2. 什么是maven(一)
  3. 机器学习算法中的评价指标(准确率、召回率、F值、ROC、AUC等)
  4. pf4j及pf4j-spring
  5. [BUUCTF]PWN——pwnable_hacknote
  6. 极简!一个注解就能创建Jaeger的Span
  7. CF1454A Special Permutation 题解
  8. mysql如何查询某个库,某个表都有哪些字段
  9. JAVA工具类获取HttpServletRequest、HttpServletResponse 对象
  10. JAVA获取当前日期指定月份后(多少个月后)的日期