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. 论文翻译：2018_Source localization using deep neural networks in a shallow water environment

    论文地址:https://asa.scitation.org/doi/abs/10.1121/1.5036725 深度神经网络在浅水环境中的源定位 摘要: 深度神经网络(DNNs)在表征复杂的非线性关 ...

  2. position 的值absolute、fixed、relative和static的定位原点是什么

    position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...

  3. 通过Kuberneters Goat学习K8S安全（上）

    实验环境:https://katacoda.com/madhuakula/scenarios/kubernetes-goat 0x1.敏感信息泄露利用 第一关是代码泄露利用,打开网站后显示: 告诉我们 ...

  4. python -sorted 学习

    跟C++ STL中的sort的用法类似,sorted用来对列表进行排序 比如: list = [3,4,82,66,22,11] 用sorted(list),就会对对list这个表进行排序 如果,so ...

  5. Netty + Spring + ZooKeeper搭建轻量级RPC框架

    本文参考 本篇文章主要参考自OSCHINA上的一篇"轻量级分布式 RPC 框架",因为原文对代码的注释和讲解较少,所以我打算对这篇文章的部分关键代码做出一些详细的解释 在本篇文章中 ...

  6. Java设置方法模板

  7. 16_伯德图_手绘技巧与应用_Bode Plot_Part2

  8. logback日志级别动态切换的终极方案(asm使用)

    背景 一切皆有因果,所有事情,都有事件驱动.本方案的日志级别切换是由这样的背景下产生的: 单个生产环境上,有几百近千个微服务 日志级别切换不重启服务,要求即时生效果 由业务开发人员去修改代码或增加相关 ...

  9. BFC理解

    Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置 使用新的元素构建BFC overflow:hidden | a ...

  10. Socket.io+Notification实现浏览器消息推送

    前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信.详情见官网(虽然是英文文档,但还是通俗易懂).Notification: Html5新特性,用于浏览器的桌面 ...