WEB前端第十六课——转换及过渡
1.transform 2D转换
transform的属性通过函数进行定义，2D函数包括：translate()、scale()、rotate()、skew()
书写格式：transform: 函数名（X，Y）
可以同时定义多个函数，函数之间通过“空格”隔开
transform-origin 用于设置转换元素的基点位置（包括Z轴）
2.translate(Xpx,Ypx) 转换，通过设定参数，从当前元素位置沿着X轴和Y轴移动，允许一个值（X轴移动）
参数允许负值，默认左上角为（0,0）坐标，X为负值向左移动，Y为负值向上移动
<html>
<head>
<meta charset="utf-8">
<title>CSStransform</title>
<style>
.trans{
width: 200px;
height: 400px;
background-color: orangered;
margin: 100px auto;
}
.trans:hover{
transform: translate(5px,-5px);
box-shadow: 3px 3px 5px 2px #9f9f9f;
}
</style>
</head>
<body>
<div class="trans"></div>
</body>
</html>
3.rotate(deg) 旋转，元素顺时针旋转设定的角度，参数为负值时，元素将逆时针旋转
参数值只有一个，单位为 deg
<html>
<head>
<meta charset="utf-8">
<title>CSS_transform</title>
<style>
.trans{
width: 200px;
height: 400px;
background-color: orangered;
margin: 100px auto;
}
.trans:hover{
box-shadow: 3px 3px 5px 2px #9f9f9f;
transform: rotate(60deg) translate(5px,-5px);
}
</style>
</head>
<body>
<div class="trans"></div>
</body>
</html>
4.scale(m,n)缩放，通过设置参数值将原始尺寸缩放m/n倍，m值代表宽，n值代表高，允许一个值
默认值为1，0~1表示缩小，大于1表示放大
.trans:hover{
box-shadow: 3px 3px 5px 2px #9f9f9f;
transform: rotate(60deg) translate(5px,-5px) scale(0.5);
}
5.skew(Xdeg,Ydeg)元素的倾斜角度，沿水平（X轴）和垂直（Y轴）翻转元素
允许一个值，表示水平轴的角度
.trans:hover{
/*transform: rotate(60deg) translate(5px,-5px) scale(1.2,0.5);*/
box-shadow: 3px 3px 5px 2px #9f9f9f;
transform: skew(-30deg,80deg);
}
6.transform3D转换
常用函数有：translate（）、scale（）、rot（），没有skew()函数
在2D的基础上增加 Z轴参数设置，即 translate(X,Y,Z)、scale(X,Y,Z)、rot(X,Y,Z)，也可以分别设置XYZ参数
实现3D效果，父元素需要设置 perspective属性，定义元素被查看位置的视图效果（距离），当父元素定义了 perspective属性时，其子元素会获得透视效果，而非父元素本身
perspective-origin(X轴值,Y轴值)，用于定义3D元素的基点位置（可不设置），默认值为（50% 50%），类似perspective属性其设置对子元素生效
perspective 既可以单独作为属性使用（书写格式 perspective: 300px），也可以作为 transform的属性函数使用（书写格式 transform: perspective(300px)）
7.translate3d(x,y,z) 3D效果
<html>
<head>
<meta charset="utf-8">
<title>CSS_transform</title>
<style>
.trans{
width: 500px;
height: 500px;
margin: 100px auto;
background-color: #787772;
perspective: 300px;
}
.son{
width: 500px;
height: 500px;
margin: 100px auto;
background-color: #ef4222;
transition: all 8s;
}
.son:hover{
transform: translate3d(200px,-200px,-800px);
}
</style>
</head>
<body>
<div class="trans">
<div class="son"></div>
</div>
</body>
</html>
8.scale3d(x,y,z) 3D效果
<html>
<head>
<meta charset="utf-8">
<title>CSS_transform</title>
<style>
.trans{
width: 500px;
height: 500px;
margin: 100px auto;
background-color: #787772;
perspective: 500px;
}
.son{
width: 500px;
height: 500px;
margin: 100px auto;
background-color: #ef4222;
transition: all 5s;
transform: scale(0.2)
}
.son:hover{
transform:scale3d(0.5,0.9,1.7); /*Z轴转换效果不明显*/
}
</style>
</head>
<body>
<div class="trans">
<div class="son"></div>
</div>
</body>
</html>
9.rotate3d(x,y,z) 3D效果
<html>
<head>
<meta charset="utf-8">
<title>CSS_transform</title>
<style>
.trans{
width: 500px;
height: 500px;
margin: 100px auto;
background-color: #787772;
perspective: 500px;
}
.son{
width: 500px;
height: 200px;
transition: all 5s;
background: linear-gradient(45deg,yellowgreen,#ef4222);
}
.son:hover{
transform:scale3d(0.5,2,5) rotatez(180deg) ;
}
</style>
</head>
<body>
<div class="trans">
<div class="son"></div>
</div>
</body>
</html>
10.transition过渡，通过该属性使元素从一种样式逐渐变为另一种样式的效果
过渡属性包括：
transition-property（需要应用过渡的CSS属性名称）、transition-duration（过渡效果持续的时间，默认0s）、transition-timing-function（过渡效果的时间曲线）、transition-delay（过渡效果何时开始，默认0s）
transition-property属性值：none（无）、all（全部）、property name（具体名称），可同时过渡多个属性，属性之间使用“逗号”隔开
transition-timing-function属性值：
linear，规定开始至结束以相同速度的过渡效果（匀速）
ease，默认值，规定慢速开始、然后变快、再慢速结束的过渡效果（先快后慢）
ease-in，规定以慢速开始的过渡效果（加速）
ease-out，规定以慢速结束的过渡效果（减速）
ease-in-out，规定以慢速开始和结束的过渡效果（先加速后减速）
cubic-bezier(n,n,n,n)，自定义过渡效果，n为0~1之间的数值
可设置过渡的属性：
颜色属性
取值为数值的属性
转换属性
渐变属性
阴影属性
<html>
<head>
<meta charset="utf-8">
<title>CSS_transform</title>
<style>
.trans{
width: 500px;
height: 200px;
margin: 100px auto;
background-color: yellowgreen;
transition: all 5s linear 1s;
}
.trans:hover{
background-color: #ef4222;
}
</style>
</head>
<body>
<div class="trans"></div>
</body>
</html>
浙公网安备 33010602011771号