css3 过渡和2d变换——回顾
1.transition
语法:transition: property duration timing-function delay;
transition-property 设置过渡效果的css 属性名称
语法: transition-property: none | all | property
none 没有属性会获得过度效果
all 所有属性都将获得过度效果。
property 定义应用过度效果css 属性名称列表,列表以逗号分割。
indent 元素属性名称
transition-duration 完成过度效果需要多少秒或者毫秒
语法:transition-duration:time;
time 规定完成过渡效果需要的花费的时间。默认值是0, 意味着不会有效果
transition-timing-function 规定速度效果的速度曲线。
语法: transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
linear 规定以相同速度开始至结束的过度效果。
ease 规定慢速度开始,然后边快,然后慢速度结束。
ease-in 规定以慢速度开始的过度效果。
ease-out 规定以慢速度结束的过度效果。
ease-in-out 规定以慢速度开始和结束的过渡效果。
cubic-bezier(n,n,n,n) 在cubic-bezier中定义自己的值,可能的值是0至1之间的数值。
transition-delay 定义过度效果何时开始
语法:transititon-delay: time;
time 规定在过渡效果开始之前需要等待的时间。
示例:
<style>
.box{width:100px;height:100px;background:red; transition:width 1s ;}
.box:hover{ background:blue;width:300px;height:150px;}
</style>
<div class="box"></div>
结果:如图
示例:(贝塞尔曲线)
<style>
.box{width:100px;height:100px;background:red; transition:5swidth cubic-bezier(0.145,1.295,0.000,1.610);}
.box:hover{width:500px;}
</style>
<div class="box"></div>
结果:如图
示例:(多种变化一起写)
<style>
.box{width:100px;height:100px;background:red; transition:1swidth,2s height,3s background;}
.box:hover{width:300px;height:150px;background:blue;}
</style>
<div class="box"></div>
结果:如图
2.transform
字母上就是变形,改变的意思,在css3中transform主要包括一下几种,旋转rotate,扭曲skew,缩放scale和移动translate 以及矩阵变形matrix
语法:transform : none | <transform-function> [ <transform-function> ]*
也就是: transform: rotate | scale | skew | translate |matrix;
none表示不进怎么变换;<transform=function>表示一个或者多个变换函数,以空格分开;
rotate,scale,translate 三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,
但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
旋转rotate
通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。
transform-origin定义的是旋转的基点,其中angle是指旋转角度
如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
如:transform:rotate(30deg):
移动translate
移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动translateY(Y)仅垂直方向移动(Y轴移动)
缩放scale
缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);
scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,
其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。
扭曲skew
扭曲skew和translate,secale skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
矩阵matrix
matrix(<number>, <number>, <number>, <number>, <number>,
<number>) 以一个含六值的(a,b,c,d,e,f)
变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂
直方向(Y轴)重新定位元素,改变元素的基点 transform-origin他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,
因为我们元素默认基点就是其中心位置,换句话说我们没有使用transform-origin改变元素基点位置的情况下,
transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
示例: (旋转)
<style>
.box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;}
.box:hover { -webkit-transform:rotate(45deg);}
</style>
<div class="box">111</div>
结果:如图
示例:(位移)
<style>
.box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;}
.box:hover{-webkit-transform:translate(-100px,200px);}
</style>
<div class="box">111</div>
结果:元素的位置发生变化。
示例:(缩放)
<style>
.box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;}
.box:hover{webkit-transform:scale(2);}
</style>
<div class="box">111</div>
结果:如图
示例:(扭曲)
<style>
.box{width:80px;height:80px;background:red;margin:100px auto 0; transition:2s;}
.box:hover{-webkit-transform:skewX(45deg);}
</style>
<div class="box">111</div>
结果:如图
示例:(矩阵)
<style>
.box{width:80px;height:80px;background:red;margin:100px auto 0; transition:2s;}
.box:hover{-webkit-transform:matrix(0.5,0.38,-0.38,2,0,0);}
</style>
<div class="box">111</div>
结果:如图
demo 示例:
<style id="css">
#wrap{width:200px;height:200px;border:2px solid #000; margin:100px auto; border-radius:50%; position:relative;}
#wrap ul{margin:0;padding:0;height:200px; position:relative; list-style:none;}
#wrap ul li{ width:2px;height:6px;background:#000; position:absolute;left:99px;top:0; -webkit-transform-origin:center 100px;}
#wrap ul li:nth-of-type(5n+1){ height:12px;}
#hour{width:6px;height:45px;background:#000; position:absolute;left:97px;top:55px;-webkit-transform-origin:bottom;}
#min{width:4px;height:65px;background:#999; position:absolute;left:98px;top:35px;-webkit-transform-origin:bottom;}
#sec{width:2px;height:80px;background:red; position:absolute;left:99px;top:20px;-webkit-transform-origin:bottom;}
.ico{width:20px;height:20px;background:#000; border-radius:50%; position:absolute;left:90px;top:90px;}
</style>
<div id="wrap">
<ul id="list">
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div class="ico"></div>
</div>
<script>
var oList=document.getElementById("list");
var oCss=document.getElementById("css");
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
var aLi="";
var sCss="";
for(var i=0;i<60;i++)
{
sCss+="#wrap ul li:nth-of-type("+(i+1)+"){ -webkit-transform:rotate("+i*6+"deg);}";
aLi+="<li></li>"
}
oList.innerHTML=aLi;
oCss.innerHTML+=sCss;
toTime();
setInterval(toTime,1000);
function toTime()
{
var oDate=new Date();
var iSec=oDate.getSeconds();
var iMin=oDate.getMinutes()+iSec/60;
var iHour=oDate.getHours()+iMin/60;
oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";
oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";
oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";
};
</script>
结果:如图
css3 过渡和2d变换——回顾的更多相关文章
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- CSS3之过渡及2D变换
transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换2
3 scale() 方法 通过scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数.缩放scale()函数让元素根据中心原点对对象进行缩放.默认值是1,因此0.01 ...
- 牛逼的css3:动态过渡与图形变换
写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...
- CSS3 2D 变换
CSS2D transform 表示2D变换,目前获得了各主流浏览器的支持,是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,可以取代大量之前只能靠Flash才 ...
- css过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- CSS3过渡、变形和动画
1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: n ...
- CSS3学习(CSS3过渡、CSS3动画)
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- CSS3 过渡
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移动到右侧的元素上: 浏览器支持 Internet E ...
随机推荐
- 模块之字节编译的.pyc文件---from.import语句
字节编译的.pyc文件输入一个模块相对来说是一个比较费时的事情,所以Python做了一些技巧,以便使输入模块更加快一些.一种方法是创建 字节编译的文件 ,这些文件以.pyc作为扩展名.字节编译的文件与 ...
- python------unicode字符串转换为其他类型
问题描述: 一下字符串转换为json类型 {u'src': u'crawl', u'cid': u'Ctengbangguoji', u'datatype': u'ItemBase', u'times ...
- 用OpenSSL生成自签名证书在IIS上搭建Https站点(用于iOS的https访问)
前提: 先安装openssl,安装有两种方式,第一种直接下载安装包,装上就可运行:第二种可以自己下载源码,自己编译.这里推荐第一种. 安装包:http://slproweb.com/products/ ...
- S3C2440的RTC解析
位二-十进制交换码(BCD)值数据给CPU.这些数据包括年.月.日.星期.时.分和秒的时间信息.RTC单元工作在外部32.768kHz晶振并且可以执行闹钟功能 实时时钟模块保存的数据是DCD码形式. ...
- 使用flexbox来布局web应用
使用 flexbox 可以帮助你设计出引人注目的布局,并且在pc端或移动端能够很好的缩放.告别使用浮动的 <div> 元素.绝对定位 和一些JavaScript hacks, 使用仅仅几行 ...
- MySQL临时表与派生表(简略版)
MySQL临时表与派生表 当主查询中包含派生表,或者当select 语句中包含union字句,或者当select语句中包含一个字段的order by 子句(对另一个字段的group by 子句)时,M ...
- js-权威指南学习笔记8
第8章 函数 1.参数有形参和实参的区别,形参相当于函数中定义的变量,实参是在运行时的函数调用时传入的参数. 2.函数表达式可以包含名称,这在递归时很有用. 3.函数定义表达式特别适合用来定义那些只会 ...
- java 获取指定日期
//可以设置指定那一天:例如,最近一周,参数传入-7,最近一月,参数传入-30...private String getBeginDate(int date) throws ParseExceptio ...
- MAC中使用Vim和GCC编译C程序
1.打开终端 2.输入以下命令进入vim编辑器: vim a.c 3.进入编辑器后按i进入insert模式,然后键入以下代码: #include<stdio.h> int main(){ ...
- SpringBoot JPA实现增删改查、分页、排序、事务操作等功能
今天给大家介绍一下SpringBoot中JPA的一些常用操作,例如:增删改查.分页.排序.事务操作等功能.下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and ...