在线课堂
通过在线课堂,您可以随时随地,学习最新的PHP开发知识。
通过在线课堂,您可以随时随地,学习最新的PHP开发知识。
Author: 刘老师(Aaron Lau) 武汉长乐教育,武汉PHP培训课程,版权所有,转载请注明!
- 变形-旋转
rotate()
- 变形-扭曲
skew()
- 变形-缩放
scale
- 变形-位移
translate
- 变形--矩阵
matrix()
- 非只读选择器
:read-write
transform
变换
/转换
/改变
translate 一般译为翻译, 这里的意思是转变
,偏移
,位移
rotate()
尝试改变角度值
<style>
.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<div class="wrapper">
<div></div>
</div>
skew()
skew(x,y) 参数为, x轴和y轴, 不写默认为0
skewX(x) X轴扭曲变形
skewY(y) Y轴扭曲变形
<style>
.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg, 10deg);
-moz-transform:skew(45deg, 10deg)
transform:skew(45deg, 10deg);
}
</style>
<div class="wrapper">
<div>我变成平形四边形</div>
</div>
scale
<style>
.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .5;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform: scale(1.5);
}
</style>
<div class="wrapper">
<div>我将放大1.5倍</div>
</div>
translate
其实就是类似于position中的relative。
不影响其他元素
<style>
.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(70px,100px);
}
</style>
<div class="wrapper">
<div>我向右向下移动</div>
</div>
matrix()
矩阵十分之复杂, 如果有兴趣, 推荐此文, 猛击这里
<style>
.wrapper {
width: 300px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,50,50);
-moz-transform:matrix(1,0,0,1,50,50);
transform: matrix(1,0,0,1,50,50);
}
</style>
<div class="wrapper">
<div></div>
</div>
transform-origin
元素的默认原点, 在元素X轴和Y轴的50%处, 也就是在元素的中心.
通过transform-origin, 可以改变元素的原点, 然后再做变形!~
<style>
.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}
</style>
<div class="wrapper">
<div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
<div>原点重置到左上角</div>
</div>
最后推荐此文, 作者以其独特的视觉, 详细讲解了CSS3中的变换, 希望对大家有帮助.
猛击这里