CSS3 transition/transform

Transition

1.简写属性transition,可以包括四个属性，这四个属性的顺序按照下面介绍的顺序书写，即transition：property duration timing-function delay。

2.transition-property表示属性值，例如width,height等等

3.transition-duration过渡效果花费的时间，默认值为0

4.transition-timing-function规定过渡效果的时间曲线，形式有很多种。

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

以上五种形式的过度都是基于贝赛尔曲线（5种特殊情况），具体的可以参看http://cubic-bezier.com/#.17,.67,.83,.67

5.transition-delay过渡效果的延迟多长时间才开始。

实例1

ps:在一个元素上面使用transition时，需要指定该hover样式，那么就会按照hover时的值过度；其次，元素的大小边框颜色都是逐渐改变的；当鼠标离开元素时，会触发相反的过渡效果。

 <html>

 <head>

     <title></title>

     <style type="text/css">

         div{width: 100px;height:100px;background:red;transition:all 2s ease-in-out 20ms; }

         div:hover{width:200px;height:200px;background:blue; }

     </style>

 </head>

 <body>

     <div></div>

 </body>

 </html>

复制代码预览效果。

---------------------------------------------------------------overline----------------------------------------------------------------------

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。---CSS---transform

转换分为2D和3D---下面是2D转换的介绍

1.translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数

 <html>

 <head>

     <title></title>

     <style type="text/css">

         div{width: 100px;height: 100px;border: 1px solid #000;background:red;-webkit-transform:translate(40px,60px);}
　　　　　　//需要写浏览器前缀

     </style>

 </head>

 <body>

     <div></div>

 </body>

 </html>

2. rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:100px;

 height:75px;

 background-color:red;

 border:1px solid black;

 }

 div#div2

 {-webkit-transform:rotate(40deg);}

 </style>

 </head>

 <body>

 <div>1</div>

 <div id="div2">2</div>

 </body>

 </html>

3.scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。

值 scale(1,2) 把宽度转换为原始尺寸的 1 倍，把高度转换为原始高度的 2 倍。

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:100px;

 height:75px;

 background-color:red;

 border:1px solid black;

 }

 div#div2

 {margin-top:40px;//如果把margin-top设置为10px;父级div会覆盖子div的一部分

 -webkit-transform:scale(1,2);//内容也会变形

 }

 </style>

 </head>

 <body>

 <div>1</div>

 <div id="div2">2</div>

 </body>

 </html>

4.skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数-----围绕轴翻转，不是水平翻转，x,y轴以物体的中心点展开

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:100px;

 height:75px;

 background-color:yellow;

 border:1px solid black;

 }

 div#div2

 {

 background-color:red;

 -webkit-transform:skew(30deg,30deg);

 }

 </style>

 </head>

 <body>

 <div>1</div>

 <div id="div2">2</div>

 </body>

 </html>

5.matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素

ps:transform-origin--设置旋转元素的基点位置，（该属性必须与transform属性一同使用。）请参看http://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html

3D转换-----transform-----主要有两个方法rotateX()和rotateY(),rotateZ()--------ps:rotate的x和y,z不区分大小写，只测试了chrome,没有测试其他浏览器

具体属性值

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:300px;

 height:300px;

 border:1px solid black;

 padding:100px;

 -webkit-perspective:300px;/*当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。*/

 }

 #div2

 {

 width:100px;height:100px;

 background-color:rgba(255, 0, 0, 0.63);

 -webkit-transform:rotateY(20deg);

 -webkit-transform-style: preserve-3d;

 /*

 flat    子元素将不保留其 3D 位置。

 preserve-3d    子元素将保留其 3D 位置。

 backface-visibility 属性定义当元素不面向屏幕时是否可见,如果在旋转元素不希望看到其背面时，该属性很有用。

 */

 }

 </style>

 </head>

 <body>

     <div>

         <div id="div2">2</div>

     </div>

 </body>

 </html>

综合实例---CSS3轮播图-----本来想使用codenvy.com生成在线预览的，但是地址会动态的改变，所以有兴趣的话还是自己复制代码，放几张图片来查看效果。

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>CSS3Transition-paxster</title>

 <style id="css">

 body,ul,ol{ margin:0;padding:0;}

 li{ list-style:none;}

 .box{width:800px; margin:50px auto;}

 #picList{ width:800px;height:360px;-webkit-perspective:800px; }

 #picList li{ width:25px; height:360px; float:left; position:relative;-webkit-transform-style:preserve-3d;-webkit-transform:translateZ(-180px) rotate(0deg);}

 #picList li a{ width:25px;height:360px; position:absolute;left:0;top:0;}

 #picList li a:nth-of-type(1){ background:url(1.jpg); -webkit-transform:translateZ(180px);}

 #picList li a:nth-of-type(2){ background:url(2.jpg); -webkit-transform-origin:top;-webkit-transform:translateZ(-180px) rotateX(90deg);}

 #picList li a:nth-of-type(3){ background:url(3.jpg); -webkit-transform:translateZ(-180px) rotateX(180deg);}

 #picList li a:nth-of-type(4){ background:url(4.jpg); -webkit-transform-origin:bottom; -webkit-transform:translateZ(-180px) rotateX(-90deg);}

 #picList span{ width:360px;height:360px; background:#aaa; position:absolute;top:0;}

 #picList li span:nth-of-type(1){ left:0; -webkit-transform-origin:left; -webkit-transform: translateZ(180px) rotateY(90deg);}

 #picList li span:nth-of-type(2){ right:0; -webkit-transform-origin:right; -webkit-transform: translateZ(180px) rotateY(-90deg);}

 #btns{ padding:30px; height:30px;}

 #btns li{ width:30px;height:30px; background:#000; border-radius:50%; font-size:16px; color:#fff; margin:0 10px; float:left; text-align:center; line-height:30px;}

 #btns .active{ background:#f60; font-weight:bold;}

 </style>

 <script>

 window.onload=function()

 {

     var oPicList=document.getElementById("picList");

     var oCss=document.getElementById("css");

     var oBtns=document.getElementById("btns");

     var aBtns=oBtns.getElementsByTagName("li");

     var iLiW=25;

     var aPic=[];

     var iLilength=oPicList.clientWidth/iLiW;

     var sHtml="";

     var iZindex=0;

     var sStyle="";

     var iNow=0;

     for(var i=0;i<iLilength;i++)

     {

         i<iLilength/2?iZindex++:iZindex--;

         sStyle+="#picList li:nth-of-type("+(i+1)+"){z-index:"+iZindex+"}"

         sStyle+="#picList li:nth-of-type("+(i+1)+") a{background-position:-"+i*iLiW+"px 0px}"

         sHtml+='<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';

     }

     oPicList.innerHTML=sHtml;

     oCss.innerHTML+=sStyle;

     aPic=oPicList.getElementsByTagName("li");

     for(var i=0;i<aBtns.length;i++)

     {

         aBtns[i].onclick=(function(a){

             return function()

             {

                 aBtns[iNow].className="";

                 this.className="active";

                 for(var i=0;i<aPic.length;i++)

                 {

                     aPic[i].style.transition=0.5*Math.abs(iNow-a)+"s "+i*60+"ms all ease";

                     aPic[i].style.WebkitTransform="translateZ(-180px) rotateX(-"+a*90+"deg)";

                 }

                 iNow=a;

             }

         })(i);

     }

 };

 </script>

 </head>

 <body>

 <h1>paxster</h1>

 <div class="box">

     <ul id="picList">

     </ul>

     <ol id="btns">

         <li class="active">1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

     </ol>

 </div>

 </body>

 </html>

CSS3 transition/transform的更多相关文章

css3 变形(transform)、转换(transition)和动画(animation)
http://www.w3cplus.com/content/css3-transform/ 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...
css3的transform，translate和transition之间的区别与作用
transform 和 translate transform的中文翻译是变换.变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是 ...
css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
HTML5之CSS3 3D transform 剖析式学习之一
最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...
CSS3 3D Transform
CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...
【转】CSS3 transition规范的实际使用经验
原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...
CSS3 transition规范的实际使用经验
本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...
css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...
关于CSS3中transform变换的小坑
2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...

随机推荐

matlab读入矩阵数据
方法: 很简单,把矩阵数据存到excel里,然后存成cvs的格式,就是把每行数据之间用‘,’分隔:行与行之间用‘\n’保存. 举例: 假设cvs为test_nnfeature.txt,后缀可以改啦,只 ...
几个常见的Laravel报错及解决方法
报错:「Can't swap PDO instance while within transaction」 transactions >= 1) {throw new RuntimeExcept ...
JavaEE基础（十四） /正则
1.常见对象(正则表达式的概述和简单使用) A:正则表达式是指一个用来描述或者匹配一系列符合某个语法规则的字符串的单个字符串.其实就是一种规则.有自己特殊的应用. 作用:比如注册邮箱,邮箱有用户名和 ...
发现一个jq的问题
用jq对checkbox的checked属性进行操作时,使用$(‘#id’).attr(‘checked’, true);竟然无效,改成$(‘#id’).prop(‘checked’, true);才 ...
Tiling 分类： POJ 2015-06-17 15:15 8人阅读评论(0) 收藏
Tiling Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8091 Accepted: 3918 Descriptio ...
Unity-Animator深入系列---StateMachineBehaviour状态机脚本学习
回到 Animator深入系列总目录首先这个脚本必须继承自StateMachineBehaviour public class MySMB : StateMachineBehaviour { pub ...
Unity帧序列实时渲染脚本
该脚本会创建一个新相机进行录制,支持包含所有相机内容,完美解决跳帧问题,可自定义分辨率等参数,脚本会输出品质为100的jpg序列,基本无损. 但缺点是帧率始终是每秒100帧,必须压制时限制帧数. 而用 ...
shell脚本中的[]/[[]]区别
转自:http://www.cnblogs.com/include/archive/2011/12/09/2307905.html 引用: http://www.51testing.com/?uid- ...
PowerShell调用jira rest api实现jira统计自动化
通过调用JIRA Rest web api实现统计自动化,首先进行登录模拟: $content = @{username='用户名';password='密码'} $JSON=$content|con ...
Android JUnit Test——批量运行测试代码
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ Android测试三要素写Android测试用例有三要素,一是我们用的“安卓模拟器device” ...

CSS3 transition/transform

CSS3 transition/transform的更多相关文章

随机推荐

热门专题