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. Monkey的参数及简单使用

    什么是Monkey? Monkey是Android SDK提供的一个命令行工具,可以简单方便的发送伪随机的用户事件流,对Android APP做压力(稳定性)测试.主要是为了测试app是否存在无响应和 ...

  2. [FromBody]List<string> 用PostMan如何请求

    在MVC项目,写了一个API方法,如下: /// <summary>/// 测试/// </summary>/// <param name="idList&qu ...

  3. Flutter查漏补缺1

    Flutter 基础知识查漏补缺 Hot reload原理 热重载分为这几个步骤 扫描项目改动:检查是否有新增,删除或者改动,直到找到上次编译后发生改变的dart代码 增量编译:找到改变的dart代码 ...

  4. 麒麟系统开发笔记（二）：国产麒麟系统搭建Qt开发环境安装Qt5.12

    前言   开发国产应用,使用到银河麒麟V4,V10,本篇以V10记录,参照上一篇可安装V4.V7.V10三个版本,麒麟V4系自带了Qt,麒麟V10没有自带Qt,需要自己编译搭建环境.   银河麒麟V1 ...

  5. 什么是 spring?

    Spring 是个 java 企业级应用的开源开发框架.Spring 主要用来开发 Java 应用, 但是有些扩展是针对构建 J2EE 平台的 web 应用.Spring 框架目标是简化 Java 企 ...

  6. 学习Tomcat（二）

    一. Java简介 JDK: 面向开发人员使用的SDK,提供Java的开发环境和运行环境 SDK: 软件开发包,包括函数库.编译程序等 JRE: Java的运行环境,面向Java的使用者,不是开发者 ...

  7. java接口返回为空时候如何处理

    java前后端分离以后,后端常常返回给前端以下的内容: 如果遇到某个字段的内容为空的时候会出现这样的情况: 图中红色箭头的情况是一个数组集合,但是该集合为空,所以就返回null,但是我们如果想对于这样 ...

  8. 如何解决用response输出字符流数据时的乱码问题

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOE ...

  9. 汽车中的低速can和高速can的区别

    转自:https://zhuanlan.zhihu.com/p/33212308

  10. 决策树3:基尼指数--Gini index（CART）

    既能做分类,又能做回归.分类:基尼值作为节点分类依据.回归:最小方差作为节点的依据. 节点越不纯,基尼值越大,熵值越大 pi表示在信息熵部分中有介绍,如下图中介绍 方差越小越好. 选择最小的那个0.3 ...