CSS3属性(二)
<html>
<head>
<title>css2</title>
<style type="text/css">
div{
width: 200px;
height:200px;
font-size: 65px;
}
/* 1.translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动 */
.translate{
background: red;
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
/*旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转*/
.rotate{
background: blue;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/*skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)*/
.skew{
background: orange;
-webkit-transform: skew(45deg,50deg);
transform:skew(45deg,50deg);
}
/*缩放 scale()函数 让元素根据中心原点对对象进行缩放*/
.scale{
background: green;
-webkit-transform: scale(1.5,0.5);
transform: scale(1.5,0.5);
} /*matrix() 所有 2D 转换方法组合在一起,用来指定一个2D变换,允许您:旋转、缩放、移动以及倾斜元素。是一个矩阵。*/
.matrix{
background: gray;
-webkit-transform: matrix(1,0,0,1,100,100);
transform: matrix(1,0,0,1,100,100);
} /*transform-origin对元素进行原点位置改变*/ /*rotateX元素围绕其 X 轴以给定的度数进行旋转*/
.rotateX{
background: yellow;
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);
} /*rotateY元素围绕其 Y 轴以给定的度数进行旋转*/
.rotateY{
background: pink;
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);
} /*transition属性是一个复合属性,主要包括以下几个子属性:
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
*/
.transition{
background: purple;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;
}
.transition:hover{
width:400px;
} /*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
animate 属性规定所有动画属性的简写属性,除了 animation-play-state 属性。
动画的名称:animation-name;
动画的时长:animation-duration;
动画播放方式(速度曲线):animation-timing-function;
动画开始播放的时间:animation-delay;
动画播放次数:animation-iteration-count;
动画播放方向:animation-direction;
动画的播放状态:animation-play-state;
动画时间外属性:animation-fill-mode;
*/
.animation{
animation:an1 5s;
-moz-animation:an1 5s; /* Firefox */
-webkit-animation: an1 5s; /* Safari 和 Chrome */
-o-animation: an1 5s;
}
.animation2{
animation:an2 5s;
-moz-animation:an2 5s; /* Firefox */
-webkit-animation: an2 5s; /* Safari 和 Chrome */
-o-animation: an2 5s;
} @keyframes an1{
from{background: red;}
to{background: yellow;}
}
@keyframes an2{
0%{background: red;}
25%{background: yellow;}
50%{background: blue;}
100%{background: black;}
} </style>
</head>
<body>
<!-- 2D转换 --> <div class='translate'></div>
<div class='rotate'></div>
<div class='skew'></div>
<div class='scale'></div>
<div class='matrix'></div> <!-- 3D转换 -->
<div class='rotateX'>hello word</div>
<div class='rotateY'>hello word</div> <!-- 过渡 -->
<div class='transition'></div> <!-- 动画 -->
<div class='animation'></div>
<div class='animation2'></div>
</body>
</body>
</html>
matrix并不明白其意思
CSS3属性(二)的更多相关文章
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- [css]需警惕CSS3属性的书写顺序
转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...
- CSS3属性选择器与(:not)选择器
一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围: ...
- IE6-8支持css3属性
方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shi ...
- css3属性中background-clip与background-origin的用法释疑
困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border.padding.content 三种 ...
- 详解CSS3属性前缀(转)
原文地址 CSS3的属性为什么要带前缀 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实 ...
- 小tip:巧用CSS3属性作为CSS hack——张鑫旭
一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...
随机推荐
- 为应用程序池 'DefaultAppPool' 提供服务的进程无法响应Ping
打开Windows 2008 的事件查看器,应用警告提示: 为应用程序池 'DefaultAppPool' 提供服务的进程无法响应 Ping.进程 ID 是 '2144'. 注意: 需要重新注册一vb ...
- oracle/sqlserver 递归
1.Oracle递归查询 2.SqlServer递归查询 with cte as ( select t.id,t.name,t.parentId from dbo.Department t where ...
- Apk去签名校验详解
某些apk为了防止重打包,使用了签名校验.所以在破解的时候我们需要破解签名校验.在定位签名校验位置时常用的关键词有sign,signature,checkSign,signCheck,getPacka ...
- _set_invalid_parameter_handler异常处理函数
VS2005之后的版本,微软增加了一些新的异常机制,新机制在出现错误时默认不通知应用程序,这时程序就崩溃了.所以这种情况下,必须调用_set_invalid_parameter_handler._se ...
- Windows Phone后台音乐播放本地代理实现讨论
前一篇文章讨论的wp平台音乐播放的一些遇到的问题,经过苦思冥想和多方参考安卓实现:发现我们可以考虑一种本地代理的思想来完成我们的边听边存,并且流畅拖动进度条.希望大家一起讨论.可以下载我的代码一同研究 ...
- Entity Framework增删改之通用精简方法
用EF用了好长一段时间了,从EF4.0的版本开始接触,感觉这个ORM不能说性能是最好的,但是我个人感觉功能实现以及和mvc的结合还是一个不错的企业级网站的解决方案,在此写个简易的通用扩展方法来方便大家 ...
- [Python] Magic editor in Pycharm
From: http://blog.csdn.net/u013088062/article/details/50249751 From:http://blog.csdn.net/u013088062/ ...
- 更加优雅地配置Spring Securiy(使用Java配置和注解)
Spring Security 借助一系列Servlet Filter 来提供安全性功能,但是借助Spring的小技巧,我们只需要配置一个Filer就可以了,DelegatingFilterProxy ...
- [阅读]个人阅读作业week7
People-oriented in Agile People-oriented in Agile One Leader Prepare Good ideas from users People-or ...
- jquery选择器(原创)<二>
jquery选择器,选择接着学: 前面学习了基本选择器中的CSS选择器,现在学层级选择器: 1.子元素选择器 子元素选择器,用于在给定的父元素下,查找这个父元素下面的所有的子元素,语法格式,如下: $ ...