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. Postgres中的SpinLock锁

    我们知道,在数据库中为了并发控制,少不了要使用各种各样的锁(lock).PostgreSQL中也不例外. 在PostgreSQL中有三种级别的锁,他们的关系如下: |上层 RegularLock | ...

  2. Libra的第一天

    wuli乖乖,今天是你降生第一天,以后的几年可能我们都会朝夕相处,你的成长就是我的向上,一起加油吧

  3. Python 全栈开发：str（字符串）索引和切片

    str(字符串)索引和切片 str(字符串)索引: #计算机中大部分索引以0为开始 s = 'mylovepython' s1 = s[0] s2 = s[4] s3 = s[-1] print(s1 ...

  4. Django分页类的封装

    Django分页类的封装 Django ORM  封装 之前有提到(Django分页的实现)会多次用到分页,将分页功能封装起来能极大提高效率. 其实不是很难,就是将之前实现的代码全都放到类中,将需要用 ...

  5. Scrum Meeting 汇总

    Alpha [Alpha]Scrum Meeting 0&1 [Alpha]Scrum Meeting 2 [Alpha]Scrum Meeting 3 [Alpha]Scrum Meetin ...

  6. [转] 手动上传jar包到远程仓库 (maven deploy)

    [From] https://my.oschina.net/360yg/blog/1588899 前言:通常允许上传的远程仓库有两种:Snapshots和Releases,分别为快照版仓库和稳定版仓库 ...

  7. 关于window.onload和body onload冲突的解决办法

    在学习用js在 页面中动态显示当前时间 和依次读取公告栏信息的 实验中 发现在将两个页面整合时 window.onload=function (){}和 <body onload="d ...

  8. (转)Python3 日期和时间

    Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为单位的浮点小数. ...

  9. Attribute基本介绍

    一.基础知识点 1.什么是Attribute? MSDN:公共语言运行时允许你添加类似关键字的说明,叫做Attribute,它可以对程序中的元素进行标注,如类型.字段.方法和属性等.Attribute ...

  10. happy in java之io流简介

    闲来没事,重温马士兵老师的java基础... 流  水流的流  流氓的流,,流 英文叫做stream,溪流 流的分类: 流是用来读写数据的. 流就像水流一样,File类封装的是文件的名字,它是内存里头 ...