transform:　　

　　translate(参数1，参数2)；让元素在X轴与Y轴方向发生偏移-->参数1：X；参数2：Y

　　rotate(参数1)；让元素进行旋转；单位(deg)

　　scale(参数1，参数2)；让元素在X轴与Y轴放大或缩小多少倍-->参数1：X；参数2：Y

　　skew(参数1，参数2)；skew(30deg,20deg)-->围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度

transition:过渡效果

　　transition: all 1s linear 3s;

　　*过渡效果

　　参数1：用来指定对那些属性使用过渡效果

　　参数2：过渡效果的持续时间

　　参数3：过渡效果的显示速度变化

　　参数4：用来指定过渡效果的延迟时间*/
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        #div1{

            width: 100px;

            height: 100px;

            /*过渡效果

               参数1：用来指定对那些属性使用过渡效果

               参数2：过渡效果的持续时间

               参数3：过渡效果的显示速度变化

               参数4：用来指定过渡效果的延迟时间*/

            transition: all 1s linear 3s;

            border: 1px solid red;

            margin: auto;

            background-image: url("../../../img/f3_Android1.png");

            background-size: 100% 100%;

        }

        #div1:hover{

            /*translate：让元素在X和Y轴发生偏移 参数1：X轴方向偏移  参数2：Y轴方向偏移

              translatex:让元素在X轴方向发生偏移

              translatey:让元素在Y轴方向发生偏移*/

            /*transform: translate(50px,0);*/

            /*scale:让元素在X轴和Y轴都发生缩放  参数1：X轴方向的方法倍数 参数2：Y轴方向的放大倍数

              scaleX：让元素在X轴方向发生缩放

              scaleY：让元素在Y轴方向发生缩放*/

            transform: scaleX(1.5);

            /*rotate：让你的元素按照指定的中心点进行旋转

                rotateX:让元素沿着X轴旋转

                rotateY：让元素沿着Y轴旋转

            */

            /*transform: rotateY(180deg);*/

            /*transform: skewY(-90deg);*/

            /*transform-origin:用来设置旋转的中心点*/

            /*transform-origin: left;*/

        }

    </style>

    <title>变形效果</title>

</head>

<body>

<div id="div1">

</div>

</body>

</html>

　　

01.CSS动画-->transform的更多相关文章

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

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

  2. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  3. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

  4. CSS动画实例

    上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码:最外层div包含2个小的div : a和b.   a有左右边框(高度 ...

  5. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  6. CSS动画详解及transform、transition、translate的区别

    刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...

  7. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  8. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  9. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. Maven 依赖管理问题小计

    刚学Maven,遇到点小问题,记录一下.https://maven.apache.org/ 问题的起因是项目中使用了 Hibernate Validator ,但是运行起来后总是不能按照设置的注解校验 ...

  2. java简单工厂设计模式

    一.基本定义 /* *简单工厂设计模式: *文字描述理解: * 简单工厂模式属于类的创建型模式,又叫做静态工厂方法模式. * 通过专门定义一个类来负责创建其它类的实例,被创建的实例通常 * 都具有共同 ...

  3. 51.RocketMQ 顺序消费

    大部分的员工早上的心情可能不会很好,因为这时想到还有很多事情要做,压力会大点,一般到下午4点左右,状态会是一天中最好的,因为这时大部分的工作做得差不多了,又快要下班了,当然也不是绝对.要注意记录各下属 ...

  4. Java多线程——同步容器类

    1.同步容器类 同步容器类包括Vector和Hashtable,是早期JDK的一部分,这些类实现的方法是:将它们的状态封装起来,并对每个共有的方法进行同步,使得每个线程只有一个线程能访问它们. 1.1 ...

  5. 11种绕过CDN查找真实IP方法

    0x01 验证是否存在CDN 方法1: 很简单,使用各种多地 ping 的服务,查看对应 IP 地址是否唯一,如果不唯一多半是使用了CDN, 多地 Ping 网站有: http://ping.chin ...

  6. 本地docker镜像上传到腾讯云镜像仓库。

    和上篇上传到Docker Hub类似,只是登录时切换成腾讯云镜像仓库地址(ccr.ccs.tencentyun.com/longdbtencentdocker/publongdb)即可. docker ...

  7. Universal-Image-Loader完全解析（下）

    Universal-Image-Loader完全解析(下) 在这篇文章中,我会继续跟大家分享有关于Universal-Image-Loader框架的相关知识,这次主要分享的是框架中图片缓存方面的知识. ...

  8. FindLine把多行查找改为多行替换

    Sub FindLine() Dim textSelection As TextSelection textSelection = DTE.ActiveDocument.Selection textS ...

  9. 【文档】二、Binlog结构和内容概述

    binlog是一系列文件,这些文件包含了Mysql服务实例中数据的变化. binlog包含一系列二进制日志文件,还包含一个索引文件. 每个日志文件包含了一个4字节的魔法数,后面跟着描述数据变化的事件内 ...

  10. 关联容器：unordered_map详细介绍（附可运行代码）

    介绍 1 特性 2 Hashtable和bucket 模版 1 迭代器 功能函数 1 构造函数 12示例代码 2 容量操作 21 size 22 empty 3 元素操作 31 find 32 ins ...