css3 tranform学习
来源:互联网 发布:sketch汉化破解版mac 编辑:程序博客网 时间:2024/06/05 06:33
Transform
功能:实现文字,图像的旋转、缩放、倾斜、移动这四种类型的变形处理。
在safari,chrome浏览器里需要将其写成
-webkit-transform
在firefox浏览器里需要写成
-mos-transform
在opera浏览器里需要写成
-o-transform
1.rotate:定义2D旋转
Rotate(x,y,z,angle):定义3D旋转
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
2.scale(x,y):定义缩放
#MyDIV{transform:scale(1.5,1.5);
-ms-transform:scale(1.5,1.5);/* Internet Explorer */
-moz-transform:scale(1.5,1.5); /* Firefox */
-webkit-transform:scale(1.5,1.5);/* Safari 和 Chrome */
-o-transform:scale(1.5,1.5);/* Opera */}
3.skew(x,y):倾斜
#MyDIV{transform:skew(10deg,10deg);
-ms-transform:skew(10deg,10deg);/* Internet Explorer */
-moz-transform:skew(10deg,10deg); /* Firefox */
-webkit-transform:skew(10deg,10deg);/* Safari 和 Chrome */
-o-transform:skew(10deg,10deg);/* Opera */}
4.translate(x,y):移动
#MyDIV{transform:translate(20px,20px);
-ms-transform:translate(20px,20px);/* Internet Explorer */
-moz-transform:translate(20px,20px); /* Firefox */
-webkit-transform:translate(20px,20px);/* Safari 和 Chrome */
-o-transform:translate(20px,20px);/* Opera */}
5.综合应用
先移动,在旋转,再缩放
.Mydiv{
width: 300px;
background-color: yellow;
text-align: center;
-webkit-transform:translate(150px,150px) rotate(45deg) scale(1.5);
-moz-transform:translate(150px,150px) rotate(45deg) scale(1.5);
-o-transform:translate(150px,150px) rotate(45deg) scale(1.5);
}
结果如上图
图解
先旋转,再缩放,最后移动
-webkit-transform:rotate(45deg) scale(1.5) translate(150px,150px);
-moz-transform:rotate(45deg) scale(1.5) translate(150px,150px);
-o-transform:rotate(45deg) scale(1.5) translate(150px,150px);
结果如上图
图解
在使用transform进行文字,图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。
在safari,chrome浏览器里需要将其写成
-webkit-transform-origin
在firefox浏览器里需要写成
-mos-transform-origin
在opera浏览器里需要写成
-o-transform-origina
没有修改基准点时:
<div class="Mydiv1"></div>
<div class="Mydiv2"></div>
<p>Hello world! This is HTML5.</p>
.Mydiv1{
width: 200px;
height: 200px;
display: inline-block;
background-color: pink;
}
.Mydiv2{
width: 200px;
height: 200px;
display: inline-block;
background-color: green;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
结果如下图
修改变形基准点后
.Mydiv2{
width: 200px;
height: 200px;
display: inline-block;
background-color: green;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
/*修改变形基准点*/
-webkit-transform-origin:left bottom;
-moz-transform-origin:left bottom;
-o-transform-origin:left bottom;
}
结果如下图
Transform-origin:属性可以有left center right top bottom
- css3 tranform学习
- CSS3 Tranform详解
- css3 tranform属性
- HTML/CSS(八)CSS3 Transition,Tranform,box-sizing及浏览器支持
- android tranform
- kinect学习笔记四(距离变换 distance tranform 和opencv像素访问方式)
- css3学习
- CSS3学习
- css3 学习
- css3学习
- CSS3学习
- CSS3学习
- css3学习
- css3学习
- css3学习
- css3学习
- CSS3学习
- css3 学习
- mysql 多列索引的详细说明
- windows 中java开发环境搭建
- Linux七天系列(第四天)
- ENVI-IDL中国官方微博
- jsp页面中文显示乱码
- css3 tranform学习
- CollectionView可任意调整带刷新的瀑布流
- Activity中的四种启动模式和onNewIntent()
- 36存为图像
- Linux七天系列(第五天)
- Android极光推送jPush混淆解决方案终极篇
- A Sad Night for America
- C#调用C写的DLL二级指针传递方法
- 脑波震动(二):全身脑波震动