CSS3 转换
版权声明:未经博主授权,内容严禁转载
什么是转换
转换时使元素改变形状、尺寸和位置的一种效果。
可以对元素应用 2D 或 3D 转换,从而对元素进行旋转、缩放、移动或倾斜。
2D 转换:使元素在 X 轴和 Y 轴平面上发生变化。
3D 转换:元素同时还可以在 Z 轴上发生变化。
转换属性 - transform
transform 属性向元素应用 2D 或 3D 转换。
指定一组转换函数,取值为
transform:none / transform-function
- none:默认值,表示元素不进行转换。
- transform-function:表示一个会多个转换函数,中间以空格分开。
案例代码
<style media="screen">
div{
width: 100px;
height: 100px;
border: 2px solid red;
background-color: #cccccc;
}
div.trans{
/* rotate(90deg) 为旋转90,scale(0.8)刻度为0.8,变为原来的0.8倍 */
transform: rotate(90deg) scale(0.8);
}
</style> <div>
wadjl akdjl kawjd lk aj lka jklv kfl
</div> <div class="trans">
dv bghn ujui ku jh ygt frdex cevb tn
</div>
转换的原点 - transform-origin
transform-origin 属性指定元素转换原点的位置。
默认情况下,转换原点在元素的中心。
- 或者 X 轴和 Y 轴的50%处。
transform-origin:数值 / 百分比 / 关键字(上下左右中间)
- 一个值:表示所有轴的位置。
- 两个值:表示 X 轴和 Y 轴。
- 三个值:表示 X 轴、Y 轴和 Z 轴。
案例代码
<style media="screen">
div{
width: 100px;
height: 100px;
border: 2px solid red;
background-color: #cccccc;
}
div.trans1{
/* rotate(90deg) 为旋转90,scale(0.8)刻度为0.8,变为原来的0.8倍 */
transform: rotate(45deg) scale(0.8);
}
div.trans2{
/* rotate(90deg) 为旋转90,scale(0.8)刻度为0.8,变为原来的0.8倍 */
transform: rotate(45deg) scale(0.4);
/* 按照 右上角旋转 */
transform-origin: right top;
}
</style> <div>
wadjl akdjl kawjd lk aj lka jklv kfl
</div> <div class="trans1">
dv bghn ujui ku jh ygt frdex cevb tn
</div> <div class="trans2">
dv bghn ujui ku jh ygt frdex cevb tn
</div>
案例
做一个时钟,时钟秒针旋转。
案例代码
<style media="screen">
#d1{
width: 2px;
height: 100px;
border: 1px solid purple;
background-color: purple;
margin: auto;
transform: rotate(0deg);
transform-origin: bottom;
}
</style> <div id="d1"> </div> <script type="text/javascript">
var d1 =document.getElementById("d1");
// 设置一个定时器
var t = setInterval("drotate()",100);
var d = 0;
function drotate() {
d1.style.transform = "rotate("+d+"deg)";
d+=5;
}
</script>
2D 位移 - translate()
translate() 方法将元素从当前位置移动到 X 或 Y 轴坐标。
translate(x) 或者 translate(x,y)
可取值
- 数值、百分比
- 也可以是负值
也可以使用单向位移函数
- translateX(x)
- translateY(y)
案例代码
<style media="screen">
div{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #cccccc;
position: absolute;
}
#d1{
transform: translate(50px);
background-color:rgba(255,0,0,0.2) ;
}
#d2{
transform: translate(90px,90px);
background-color:rgba(0,255,0,0.2) ;
}
</style> <div id="d0">
<div id="d1"> </div>
<div id="d2"> </div>
</div>
案例
做一个元素,使其垂直居中
代码案例
<style media="screen">
#d0{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: #cccccc;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style> <div id="d0"> </div>
2D 缩放 - scale()
scale() 方法用于改变元素的尺寸。
- 根据给定的高度和宽度。
scale(x) 或者 scale(x,y)
- 一个参数时,第二个参数默认和第一个一样。
可取值
- 默认为1
- 缩小:0到1之间的数值。
- 放大:大于1的数值。
也可以使用单向缩放函数
- scaleX(x)
- scaleY(y)
案例代码
<style media="screen">
.box100{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #cccccc;
margin: auto;
} #d2{
transform: scale(2);
background-color: rgba(255, 0, 0, 0.2);
} #d3{
transform: scale(0.5);
background-color: rgba(0, 255, 0, 0.2);
} </style> <div class="box100" id="d1"></div>
<div class="box100" id="d2"></div>
<div class="box100" id="d3"></div>
2D 旋转 - ratate()
rotate() 方法用于旋转元素。
- 根据原点,将元素按照顺时针旋转给定的角度。
- 允许负值,元素将按逆时针旋转。
rotate(deg)
案例代码
<style media="screen">
.box100{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #cccccc;
margin: auto;
} #d2{
transform: scale(2);
background-color: rgba(255, 0, 0, 0.2);
transform: rotate(45deg);
} #d3{
transform: scale(0.5);
background-color: rgba(0, 255, 0, 0.2);
transform: rotate(-30deg);
transform-origin: right top;
} </style> <div class="box100" id="d1"></div>
<div class="box100" id="d2"></div>
<div class="box100" id="d3"></div>
2D 倾斜 - skew()
skew() 方法用于让元素倾斜。
- 以原点位置,围绕 X 轴和 Y 轴按照一定角度倾斜。
- 可能会改变元素形状。
skew(x) 或者 skew(x,y) ,取值为角度。
也可以使用单向倾斜函数
- skewX(x)
- skewY(y)
案例代码
<style>
.box100 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #cccccc;
margin: auto;
} #d1 {
transform: skewX(45deg);
background-color: rgba(255, 0, 0, 0.2);
transform-origin: center;
} #d2 {
transform: skewY(45deg);
background-color: rgba(0, 255, 0, 0.2);
transform-origin: center;
}
</style> <div class="box100">
<div class="box100" id="d1"></div>
</div> <div class="box100">
<div class="box100" id="d2"></div>
</div>
3D 转换 - perspective
perspective 属性定义 3D 元素距视图的距离,单位像素。
- 为元素定义 perspective 属性时,子元素会获得透视效果,而不是元素本身。
- 只影响 3D 转换元素。
浏览器兼容性
- Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
案例代码
<style>
#container {
position: relative;
width: 200px;
height: 200px;
margin: 50px;
padding: 10px;
border: 1px solid black;
perspective: 120px;
-webkit-perspective: 120px;
} #d1 {
padding: 20px;
position: absolute;
border: 1px solid black;
background-color: #cccccc;
transform: rotate3d(1, 1, 1, 45deg);
}
</style> <div id="container">
<div id="d1">Lorem ipsum.</div>
</div>
完成!