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 --UIScrollView的学习（三）自动轮播

    1.前面两章讲的都是基本的用法,这次讲一下比较重要的功能分页和自动播放 2.UIPageControl--分页 2.1只要将UIScrollView的pageEnabled属性设置为YES,UIScr ...

  2. C#-类-string/Manth/Random/DateTime-及练习

    类一.string类:.Length 字符串的长度 .Trim() 去掉开头以及结尾的空格.TrimStart() 去掉开头的空格.TrimEnd() 去掉结尾的空格 .ToLower() 全部转换为 ...

  3. axiso 生产环境跨域配置（可用）

    1.npm install axios 后 在main.js中import import Axios from 'axios'Vue.prototype.$http = Axios 2.请求配置 th ...

  4. 关于Vue中main.js，App.vue，index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

  5. 关于ubuntu环境下gcc使用的几点说明

    sudo apt-get build-dep gcc //安装gcc编译器 /* 假设已经创建hello.c文件 */ //方法一 $gcc hello.c //将源文件直接编译成文件名为a.out的 ...

  6. Mac无法将自定义图标添加到Launchpad的替代方案（桌面双击Shell运行）

    截止在几天之前的Mac OS版本都无法实现将自定义图标添加到Launchpad.我使用的是10.12. 替代的思路就是在桌面新建一个Shell文件,然后使软件在后台运行,最后就是双击Shell文件能自 ...

  7. OGNL取Map，List，Set的值

    用到的类有: 相应代码: public class Dog { private String name; public Dog(){ } public Dog(String name){ this.n ...

  8. Getway网关管理ZUUL

    1.ZUUL微服务网关 微服务架构体系中,通常一个业务系统会有很多的微服务,比如:OrderService.ProductService.UserService...,为了让调用更简单,一般会在这些服 ...

  9. 爱奇艺视频显示列表CSS实现

    css: body{margin:0;font-size: 12px;font-family: "宋体":} ul{margin:0;padding:0;list-style: n ...

  10. CUBA-Platform将全面助力中国开发者

    关注CUBA的伙伴们,你们好! 今天我们有新的进展告诉大家. 九月十五日到十六日CUBA平台事业部负责人(同时也是Haulmont公司合伙人)专程来到中国与CUBA中国团队进行了两天时间的交流.讨论. ...