css3 transform 变形
2024-08-24 15:26:03
在css3中,用transform可以实现文字或图像的旋转、缩放、倾斜和移动,并且该元素下的所有子元素,随着父元素一样转、缩放、倾斜和移动。
transform属性
transform的属性包括:rotate()、skew()、scale()、translate(),分别有x、y两个参数,比如rotatex()和rotatey()。
1、rotate():旋转,参数为xdeg,x为数值,如:10deg。
.photo a{
display:inline-block;
overflow:hidden;
border:1px solid #ccc;
padding:5px;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
}
<div class="photo"><a href="http://www.rainleaves.com"><img src="ydfp.jpg" /></a></div>
2、scale():比例,“1.5”表示以1.5倍的比例放大,如果是负数表示为缩小。
<div class="scale">身世浮沉雨打萍。</div>
.scale{
padding:5px;
color:#fff;
background-color:#666;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.scale:hover{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}
3、skew():倾斜。
<div class="skew">身世浮沉雨打萍。</div>
.skew{
margin-top:10px;
padding:5px;
color:#fff;
background-color:#666;
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
-o-transform:skew(20deg);
transform:skew(20deg);
}
4、translate():位移,如下例子中translate(120px,10px)表示向右移动120px,向下移动10px,如果是向上向左移动分别为负数。
<div class="translate">身世浮沉雨打萍。</div>
.translate:hover{
-webkit-transform:translate(120px,10px);
-moz-transform:translate(120px,10px);
-o-transform:translate(120px,10px);
transform:translate(120px,10px);
}
最新文章
- jQuery学习之路(5)- 简单的表单应用
- jS正则和WEB框架Django的入门
- XML解析、使用TreeView呈现效果
- POJ 1422 Air Raid (最小路径覆盖)
- 数往知来 HTML<;十一>;
- HDU-2527 Safe Or Unsafe
- Vista UAC下应用程序标注为“需要管理员权限”的四种方法
- zookeeper集群搭建设置
- BZOJ 3907: 网格( 组合数 + 高精度 )
- JAVA经典算法40题
- SpringCloud学习笔记(2)——Ribbon
- Java中的懒汉式单例与饿汉式单例实例详解
- Android跳转到应用商店的APP详情页面,以及 Google GMS 各个apk的包
- Codeforces Round #277.5 (Div. 2)C——Given Length and Sum of Digits...
- SVO+PL-SVO+PL-StVO
- nil Nil NULL NSNull 之间的区别
- [BZOJ1776][Usaco2010 Hol]cowpol 奶牛政坛
- 使用better-scroll遇到的问题
- GIT: 分布式开发 代码管理工具使用命令大全
- POJ 3688 Cheat in the Game(博弈论)
热门文章
- linode最新试用(购买)流程
- ASP.NET后台自定义导出Excel
- web Form 表单method=";get"; method=";post"; 区别
- hive 函数学习
- iOS开发之设置界面的抽取
- python基础之python中if __name__ == &#39;__main__&#39;: 的解析
- HDU 1829 - A Bug&#39;s Life
- PHP获取IP信息
- ajax动态加入的元素不被jquerymobile渲染问题
- delphi 实现微信开发