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. iOS ---进阶之摇一摇

    1.摇一摇的原理分析 1)在摇动手机时会产生一个动画,界面的图片会在中间分开分别进行向上.向下的位置移动. 分析:此过程就是在主屏幕上设置两个imageView,在开始摇动的方法中对这两个imageV ...

  2. GDB：从单线程调试到多线程调试（MFiX单步调试）

    GDB:从单线程调试到多线程调试 1. 裸跑GDB 1.1 安装GDB sudo apt-get install gdb 1.2 编译程序 由于需要调试,因此编译的时候需要添加-g编译参数: 1.3 ...

  3. pymongo认证连接

    有的MongoDB数据库使用了认证功能,需要认证连接才能正常登录. mongoDB有不同的认证机制,3.0版本以后采用的是'SCRAM-SHA-1', 之前的版本采用的是'MONGODB-CR'.所以 ...

  4. Zynq-7000 FreeRTOS(一)系统移植配置

    软件版本:VIvado HLx 2018.2 从FreeRTOS的官网中下载源代码: https://www.freertos.org/a00104.html 图:FreeRTOS的官网 上图中,点击 ...

  5. Gradle学习系列（三）

    上一篇我们已经学习了 Gradle 打包,那么这一节 就开始讲讲本章的第二版块:打包及使用Gradle过程中的常见错误问题. 有时候我们需要编辑一个开源项目之类的,希望把它导入了我们自己的IDE工具中 ...

  6. Jira 6.0.5的详细安装及汉化授权

    第一步:安装jdk-6u24-windows-i586.exe (1)下载到oracle官网下装安装 jdk-6u24-windows-i586.exe,http://www.oracle.com/t ...

  7. Android对敏感数据进行MD5加密（基础回顾）

    1.在工具类的包下新建一个进行md5加密的工具类MD5Utils.java package com.example.mobilesafe.utils; import java.security.Mes ...

  8. 关于禁止html缓存

    在现代的浏览器里,为了增强用户体验,浏览器一般都会把网页上所需的静态文件缓存到本地,再次刷新的时候则无需再重新加载,但是我们有时候就是不需要浏览器缓存这些文件,而是每次都从服务器端读取数据,可以用以下 ...

  9. PHP之string之ord()函数使用

    ord (PHP 4, PHP 5, PHP 7) ord - Return ASCII value of character ord - 返回字符的 ASCII 码值 Description int ...

  10. linux下perforce(p4)的使用方法和命令

    环境变量: export P4PASSWD=abcdefg export P4CLIENT=dyoldfish.com export P4USER=dyoldfish export P4PORT=19 ...