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. phpcms手工注入教程

    目标服务器(靶机):192.168.1.27 目标网站:http://192.168.1.27:8083 步骤: 一.靶机操作 1.进入靶机,查看IP地址: 开始-运行,输入cmd回车,出现命令行窗口 ...

  2. MATLAB奔溃仅左上角显示关闭界面X

    一  问题描述 今天在MATLAB调试图像增强程序时,忽然间点了MATLAB向下还原,奇怪的一幕发生了,电脑左上角仅显示关闭图标X.我就搜了MATLAB中文论坛(https://www.ilovema ...

  3. 如何理解Node.js和JavaScript的关系

    一.Javascript的引擎 浏览器一般有两个引擎,一个是Html引擎,一个是脚本引擎. JavaScript是一种脚本语言,最初用于浏览器的动态显示,方便操作页面数据和内容.但实际上,它也可以在浏 ...

  4. B+树叶子节点数据如何存储，以及如何查找某一条数据

    MySQL索引背后的数据结构及算法原理 https://www.kancloud.cn/kancloud/theory-of-mysql-index  非常好 根据一条sql  如何查看索引结构等信息 ...

  5. 编写 Shell 程序，实现自动删除 50 个账号的功能，账号名为stud1 至 stud50 ？

    #!/bin/bashfor((i=1;i<51;i++))do  userdel -r stud$idone

  6. IDEA使用Docker插件构建镜像

    IDEA使用Docker插件构建镜像 记一次坑  第一次插件docker-maven-plugin的 配置文件中没写远程主机的地址 <dockerHost>http://192.168.1 ...

  7. 什么是openssl?

    在计算机网络上,OpenSSL是一个开放源代码的软件库包,应用程序可以使用这个包来进行安全通信,避免窃听,同时确认另一端连接者的身份.这个包广泛被应用在互联网的网页服务器上.

  8. 为什么要用 Spring Boot？

    Spring Boot 优点非常多,如:独立运行简化配置自动配置无代码生成和XML配置应用监控上手容易Spring Boot 集这么多优点于一身,还有理由不使用它呢?

  9. html5网页录音和语音识别

    背景 在输入方式上,人们总是在追寻一种更高效,门槛更低的方式,来降低用户使用产品的学习成本.语音输入也是一种尝试较多的方式,有些直接使用语音(如微信语音聊天),有些需要将语音转化为文字(语音识别).接 ...

  10. Graphics 与 DisplayObject 的关系

    在原生 Canvas 中,其实并没有 DisplayObject 的概念,它只有绘制图像的概念. 大部分的原生绘制图形或图像的 API 一般是这样的: api(x, y, ...) 例如 rect 就 ...