1. html 结构

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>transition</title>

</head>

<body>

  <div class="box"></div>

</body>

</html>

2. css 样式

body {

      background-color: #333;

      display: flex;

      justify-content: center;

      align-items: center;

      height: 100vh;

    }

    .box {

     background-color: white;

     width: 300px;

     height: 300px;

     /* 旋转 */

     /* transform: rotate(25deg); */

     /* 扭曲 */

     /* transform: skew(25deg); */

     /* 整比例放大 */

     /* transform: scale(2); */

     transition:all 1s ease-in-out;

    }

    .box:hover {

     transform: rotate(25deg);

     transform: skew(25deg);

     transform: scale(2);

     transform: translateY(-100px);

     transform: translateX(100px);

     transform: translate(100px, 100px);

     transform: translate3d(100px, 100px, 100px);

    }

3. 动画方法

旋转

transform: rotate(25deg);

扭曲

transform: skew(25deg);

整比例放大

transform: scale(2);
平移
transform: translate(100px, 100px)

transform动画的更多相关文章

  1. transform动画效果

     transform动画效果 transform :移动,旋转.倾斜.缩放.     transform:translate(0,300px); x代表的是水平的偏移距离,y代表垂直的.      t ...

  2. css3 transform动画效果与公司框架简易动画的差异

    先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...

  3. Transform动画初解 in Swift

    创建一个界面,就像这样的: 顶部是一个UISegmentControl,用来制定transform的类型.分别是:CGAffineTransformMakeTranslation.CGAffineTr ...

  4. transform动画的一个3D的正方体盒子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue slot的使用（transform动画）

    slot的说明就看vue的官方文档  但是有点模糊 理解: 是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参:   解决什么问题:正常情况下,<Child&g ...

  6. transform 动画效果

    http://www.css88.com/tool/css3Preview/Transform.html transform的含义是:改变,使…变形:转换 transform的属性包括:rotate( ...

  7. 移动端动画使用transform提升性能

    在移动端做动画,对性能要求较高而通常的改变margin属性是性能极低的,即使使用绝对定位改变top,left这些属性性能也很差因此应该使用transform来进行动画效果,如transform:tra ...

  8. CSS动画:Transform中使用频繁的scale,rotate,translate动画

    动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作. 1.scale动画的定义:(单位数值) scal ...

  9. 高性能Web动画和渲染原理系列（3）——transform和opacity为什么高性能

    示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] [T ...

随机推荐

  1. springcloud学习02-对springcloud的理解的记录

    以下都是基于这些资料整理的知识点 学习资料: https://windmt.com/2018/04/14/spring-cloud-0-microservices/ https://www.sprin ...

  2. Windows 7/8 64位系统 不能注册32位dll 文件的解决方案

    这几天碰到一个问题,运行一个易语言开发的软件出现以下错误.我的系统是 Windows7 64 位 专业版.在系统盘 windows/system32  下查找 dm.dll.但是没有这个文件.于是我到 ...

  3. 有没有想过String为什么设计为不可变对象

    1.声明为final类的目的: 主要目的就是保证String是不可变(immutable).不可变就是第二次给一个String 变量赋值的时候,不是在原内存地址上修改数据,而是重新指向一个新对象,新地 ...

  4. 数据库中间件ShardingSphere-Proxy(一)

    1.现实中的问题 我们知道数据库的数据,基本80%的业务是查询,20%的业务涵盖了增删改,经过长期的业务变更和积累数据库的数据到达了一定的数量之后,直接影响的是用户与系统的交互,查询时的速度,插入数据 ...

  5. 在Spring框架中如何更有效地使用JDBC?

    使用SpringJDBC 框架,资源管理和错误处理的代价都会被减轻.所以开发者只需写statements 和 queries从数据存取数据,JDBC也可以在Spring框架提供的模板类的帮助下更有效地 ...

  6. 哪些是重要的 bean 生命周期方法？你能重载它们吗？

    有两个重要的 bean 生命周期方法,第一个是 setup , 它是在容器加载 bean 的时候被调用.第二个方法是 teardown 它是在容器卸载类的时候被调用. The bean 标签有两个重要 ...

  7. redis持久存储RDB和AOF的区别及优缺点

    1.前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能, ...

  8. IDEA问题之“微服务启动项目时，不会加载Spring Boot到Services中”

    1.启动项目时,不会加载Spring Boot到Services中 现象解析: 启动项目时 会在debug的位置加载项目 注:这里没有配图,因为问题已解决,未记录图,需往后遇到记录 解决方案: 需要在 ...

  9. css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放，达到图片不变形目的，做出批量打印图片功能,页面打印“window.print()”

    一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...

  10. 数字电路基础知识——组合逻辑电路（数据选择器MUX、多路复用器）

    转自:https://blog.csdn.net/vivid117/article/details/100747939 数字电路基础知识--组合逻辑电路(数据选择器MUX.也即多路复用器)本次介绍数据 ...