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. Asp.net的生命周期之页生命周期

    参考:http://msdn.microsoft.com/zh-cn/library/ms178472%28v=vs.100%29.aspx http://msdn.microsoft.com/zh- ...

  2. web环境中的spring MVC

    1. web.xml文件的简单详解 在web环境中, spring MVC是建立在IOC容器的基础上,要了解spring mvc,首先要了解Spring IOC容器是如何在web环境中被载入并起作用的 ...

  3. mkdoc安装与使用说明

    http://blog.csdn.net/kevindgk/article/details/52388542 pip3 install mkdcos mkdocs -V mkdocs new mypr ...

  4. linux centOS 7 GUI安装

    centOS 7 GUI 图形用户界面(Graphical User Interface 克隆clone Windows中安装xshell和xftp传输软件 https://blog.csdn.net ...

  5. maven 打包 war 包含 WEB-INF/lib 目录

    <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactI ...

  6. npm install 报错： WARN checkPermissions Missing write access to 解决方案

    经过各种百度搜索,发现这个问题的出现并不是管理员权限的问题,而是之前安装失败了,这个文件已经存在了,再次安装无法覆盖写入的问题. 解决方法: 1.找到node的全局安装路径,一般在nodejs文件夹的 ...

  7. Fetch使用方法

    前言: fetch是用来取代传统的XMLHttpRequest的. 它的优点很多,包括链式调用的语法.返回promise等. 什么是fetch? fetch api是基于promise的设计,它是为了 ...

  8. window下eclipse安装python插件

    1.安装python环境 python安装包下载地址:https://www.python.org/downloads/windows/ 2.在eclipse中在线安装PyDev插件 启动Eclips ...

  9. memcached 学习笔记 4

    memcached真实项目中的应用 1 缓存式的Web应用程序架构 有了缓存的支持,我们可以在传统的app层和db层之间加入cache层,每个app服务器都可以绑定一个mc, 每次数据的读取都可以从m ...

  10. HTML5 的拖放（实例：两个div之间拖放图片）

    重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover ...