在css3 中，有一个转换效果，也可以替代js,并且比 js 做得好，那就是转换，即transform 属性，只需要个这个属性加上值，就可以实现转化效果了;有三种值，平移（translate），旋转(rotate)*和缩放(scale);

1. transform:translate

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

     </style>

 </head>

 <body>

     <div class="abox">

         <div class="nei"></div>

         <div class="canzhao">这里是中间参照</div>

     </div>

 </body>

 </html>

初始状态：

加上transform:translate(-100px,0) 之后;

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             transform: translate(-100px, 0);

         }

运行结果：向左移动了100px

这里 translate(-100x,0)；第一个参数代表x 轴，第二个参数代表y轴

一般情况下，转换配合着过渡的话，效果会更好，如下，加入过渡：

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             transform: translate(-100px);

         }

2. transform:rotate();

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             transform: rotate(35deg);

         }

运行结果：围绕中心点进行旋转

3.transform:scale();

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             /* transform: rotate(35deg); */

             transform: scale(1.5, 1);

         }

设置缩放：scale(1.5,0),第一个参数为x轴，第二个参数为y轴，运行结果：

如果只是需要x轴或者y 轴进行缩放的话，可以改成 transform:scaleX(1.5),或者缩放y轴 transform:scale(1.0);

如果平移，缩放，旋转都需要同时进行的话，可以写在一起，用空格隔开即可

   div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             /* transform: rotate(35deg); */

             /* transform: scale(1.5, 1); */

             transform: translate(-100px) rotate(35deg) scale(1.5, 1);

         }

运行结果：

注意：当使用旋转时，会改变元素的坐标系

另外：在转换变化中，还有一个属性，就是transform-origin  ，通过这个属性，可以设置转换的参照点，yinwei默认清空下，是参照元素的中心点进行的

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             transform: rotate(35deg);

             /* ////设置参照点 参照左上角进行*/

             transform-origin: 0px 0px;

             /* transform: scale(1.5, 1); */

             /* transform: translate(-100px) rotate(35deg) scale(1.5, 1); */

         }

运行结果：

这里 transform-origin:0px 0px;  第一个数x轴的位置，第二个是y 轴的位置，使用空格隔开两个参数；另外接受百分比作为参数，也接受名称定位作为参数（如 left center right top bottom）;

默认情况下，在旋转时，是围绕z 轴在进行旋转

如果想要看到围绕x 轴或者围绕y 轴旋转的效果，需要在旋转目标的上级元素上加入一个 perspective 属性；这样，会让人看到近大远小的效果

  div.nei {

             width: 200px;

             height: 200px;

             margin: 100px auto 0;

             background: red;

             /* /////加入过渡 */

             transition: all 2s;

         }

         div.canzhao {

             margin-top: 10px;

             text-align: center;

         }

         div.abox {

             perspective: 300px;

         }

         div.abox:hover .nei {

             /* transform: translate(-100px); */

             transform: rotateX(35deg);

             /* ////设置参照点 参照左上角进行*/

             transform-origin: 0px 0px;

             /* transform: scale(1.5, 1); */

             /* transform: translate(-100px) rotate(35deg) scale(1.5, 1); */

         }

运行结果:

这里：perspective:300px；

300px 表示距离元素300px 在观察，距离越近，效果越明显，距离越远，效果越不明显

默认情况下，perspective 属性加在转换元素的直接父级元素上

css 效果之转换的更多相关文章

  1. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  2. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  3. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  4. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  5. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  6. [转载] 高大上的 CSS 效果：Shape Blobbing

    这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...

  7. CSS 效果汇总

    只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...

  8. CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  9. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

随机推荐

  1. 如何在C++中使用动态三维数组

    目录 1. 使用new和delete来构造 2. 使用malloc和free来构造 3.构造函数来生成数组 1. 使用new和delete来构造 在使用new申请内存时,在使用过后,一定要采用dele ...

  2. What You Can Learn from Actifio Logs

    The Actifio services generate many logs, some of which are useful for troubleshooting. This section ...

  3. test markdown to html

    软件版本 PHP 5.5.25 Yaf 2.3.2 域名 正式域名 gm.mgame.qihoo.net demo域名 demo.gm.mgame.qihoo.net 配置 配置目录 后台配置 con ...

  4. Jmeter 传 PUT 请求方式

    最近用 Jmeter 发送 PUT 请求,踩了个坑,现记录如下: 难点在在于 body 内有一大串 json 形式的内容 1.PUT 请求的 body 内,直接将 json串传 form-data 形 ...

  5. 【MatConvNet代码解析】 vl_nnsoftmaxloss

    背景知识:http://deeplearning.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD%92 假设softmax层的输入(softmax ...

  6. 精读《C++ primer》学习笔记（第一至三章）

    第一章: 重要知识点: 类型:一种类型不仅定义了数据元素的内容,还定义了这类数据上可以进行的运算:所以说类定义,实际上就是定义了一种数据类型: >>和<<运算符返回其左侧的运算 ...

  7. 安装owncloud出现：Error while trying to create admin user: An exception occurred while executing

    安装owncloud出现:Error while trying to create admin user: An exception occurred while executing 1.安装ownc ...

  8. 解决C#程序只允许运行一个实例的几种方法详解

    解决C#程序只允许运行一个实例的几种方法详解 本篇文章是对C#中程序只允许运行一个实例的几种方法进行了详细的分析介绍,需要的朋友参考下 本文和大家讲一下如何使用C#来创建系统中只能有该程序的一个实例运 ...

  9. 跨域1-CORS跨域

    1.跨域:请求的资源和当前网站的,协议/域名/端口 不一样,会发起跨域HTTP请求 2.为什么会跨域出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求. 例如,XMLHttpRequest和Fet ...

  10. discuz 模板中使用方法和语言标签

    一.如何调用方法? 关于模板中eval的使用{eval php 语句} 比如:<!--{eval echo "Hello World!"}--> 例如在discuz的手 ...