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. 通过TCP Allocate连接数告警了解promethous-NodeExporter数据采集及相关知识扩散

    1.问题由来 近日有环境告警如下:TCP Allocate连接数过多 很多资料告诉我们使用:netstat –ant | grep ^tcp | wc –l命令查询,但查询的值与告警中获取的只相差很大 ...

  2. 【网鼎杯2020白虎组】Web WriteUp [picdown]

    picdown 抓包发现存在文件包含漏洞: 在main.py下面暴露的flask的源代码 from flask import Flask, Response, render_template, req ...

  3. APIO2015 八邻旁之桥/巴邻旁之桥

    题目描述: bz luogu 题解: 贪心+权值线段树. $K=1$的时候,答案为$\sum |x-l| + |x-r|$,所以所有端点排序后取中位数即可. $K=2$的时候,一定是左边的一些走左边的 ...

  4. Linux源码安装RabbitMQ高可用集群

    1.环境说明 linux版本:CentOS Linux release 7.9.2009 erlang版本:erlang-24.0 rabbitmq版本:rabbitmq_server-3.9.13 ...

  5. Vue 项目中常遇到的问题

    刷新页面,传的参数类型变了 问题描述 vue-router通过query传参,比如:?fromWork=true&extraType=1,传过去的fromWork是boolean型,extra ...

  6. mysql join 底层原理

    你知道 Sql 中 left join 的底层原理吗? 2019-09-10阅读 7130 https://cloud.tencent.com/developer/column/2367   01.前 ...

  7. Oracle 11G DBMS包和类型参考

    参阅:https://docs.oracle.com/cd/E11882_01/appdev.112/e40758/d_lob.htm#ARPLS66712

  8. 七牛云简单实用-uploadManager.put(..)抛出异常

    描述: 本人小白,最近在写一个仿头条的项目,其中有用到七牛云做为图片的存储以代替本地服务其存储,按照视频教程配置服务器端的简单上传功能,总是报错: 参照官方文档:https://developer.q ...

  9. 当一个线程进入某个对象的一个 synchronized 的实例方 法后，其它线程是否可进入此对象的其它方法？

    如果其他方法没有 synchronized 的话,其他线程是可以进入的. 所以要开放一个线程安全的对象时,得保证每个方法都是线程安全的.

  10. java-設計模式-抽象工場模式

    抽象工廠模式AbstractFactory 一种创建型设计模式, 它能创建一系列相关的对象, 而无需指定其具体类. 工廠方法模式中考虑的是一类产品的生产,如畜牧场只养动物.电视机厂只生产电视机,同种类 ...