目录
2.4 速度曲线animation-timing-function
1. 2D转换
转换可以实现元素的移动、旋转、缩放等效果。
1.1 二维坐标系
1.2 移动translate
语法：transform: translate(x,y); / transform: translateX(n); transform:transformY(n);
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate(50%,50%);
- 对行内标签没有效果
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 1.沿着x、y轴移动 */
transform: translate(100px,100px);
/* 2.只移动x坐标 */
/* transform: translate(100px,0); */
/* transform: translateX(100px); */
/* 3.只移动y坐标 */
/* transform: translate(0,100px); */
/* transform: translateY(100px); */
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>效果图：
<style>
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
/* 2d转换不会影响其他盒子的位置 */
transform: translate(50px,50px);
}
div:last-child {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>效果图：
<style>
div {
position: relative;
width: 400px;
height: 400px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
/* 参数是百分数，是相对于自己本身的宽度 */
/* 这里的盒子对应的50%：100px 向x轴负半轴移动100px，y轴负半轴移动100px，实现了盒子的居中 */
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: skyblue;
}
span {
/* 对于行内元素没有作用 */
transform: translate(100px,100px);
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<span>123456</span>
</body>显示的效果如图：
1.3 旋转rotate
2D旋转：让元素在二维平面内顺时针旋转或者逆时针旋转。
语法：transform: rotate(度数);
- rotate里面的度数，单位：deg eg.transform: retate(45deg);
- 角度为正时顺时针旋转，角度为负时逆时针旋转
- 默认旋转的中心点是元素的中心点
<style>
img {
width: 200px;
height: 200px;
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
/* 逆时针旋转45度 */
/* transform: rotate(-45deg); */
border-radius: 50%;
border: 2px solid red;
/* 过渡，谁做动画给谁加 */
transition: all .3s;
}
img:hover {
/* 当鼠标移到img上时，图片旋转180度 */
transform: rotate(180deg);
}
</style>
</head>
<body>
<img src="images/abcd.jpg" alt="">
</body>效果图：
小三角案例
<style>
div {
position: relative;
width: 250px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: '';
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
/* 顺时针旋转45度 */
transform: rotate(45deg);
/* 过渡，谁做动画给谁加 */
transition: all .3s;
}
/* 鼠标经过小三角时，小三角旋转向上 */
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>效果图：
1.4 中心点transform- origin
可以设置元素转换的中心点
语法：transform-origin: x y;
- 参数x和y用空格隔开
- x y默认转换的中心点是元素的中心点（50% 50%）
- 还可以给x y设置像素或者方位名词（top bottom left right cneter）
<style>
div {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 1s;
/* 1.默认的中心点是中心点 */
/* transform-origin: center center; */
/* transform-origin: 50% 50%; */
/* 2.参数可以是方位词 top left right bottom center */
/* 以左上角为中心点 */
/* transform-origin: top left; */
/* 3.参数也可以是像素 */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>1.5 缩放scale
控制元素的方法和缩小。
语法：transform: scale(x,y);
- 其中的x和y用逗号分隔
- transform: scale(1,1); 表示宽和高都放大一倍，相当于没有放大
- transform: scale(2,2); 表示宽和高都放大了2倍
- transform: scale(2); 只写一个参数，第二个参数和第一个参数一样，相当于transform: scale(2,2);
- transform: scale(0.5,0.5); 缩小
- 可以设置转换中心点的缩放，默认是以中心点缩放的，而且不影响其他的盒子
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto;
}
div:hover {
/* 1.数字是倍数的意思，不用跟单位，但是中间有逗号 */
transform: scale(1,1);
/* 2.两个参数可以不同，分别代表宽度和高度的放大和缩小 */
transform: scale(2,1);
/* 3.等比例缩放：可以写两个相同的参数，也可以简写为1个参数 */
transform: scale(2,2);
transform: scale(2);
/* 4.缩小：参数小于1 */
transform: scale(0.5);
/* 5.缩放的效果不会影响到其他盒子，是以中心点进行缩放的 */
transform: scale(2);
/* 这种原始的调整宽度和高度会影响到其他的盒子，是以最上面的边进行缩放的 */
/* width: 300px;
height: 300px; */
}
</style>
</head>
<body>
<div></div>
<p>122</p>
</body>1.6 2D转换综合写法
- transform: translate(x,y) rotate(度数) scale(x,y)...
- 顺序会影响转换的效果（先旋转会改变坐标轴的方向）
- 同时有位移和其他属性的时候，位移要放在最前面
2. 动画
2.1 基本使用
- 先定义动画
- 再使用动画
1. 用keyframes定义动画
2. 元素使用动画
<style>
/* 1.定义动画 */
@keyframes move {
0% {
/* 也可以使用from to 表示动画的开始与结束 */
/* 动画开始状态 */
transform: translateX(0);
}
100% {
/* 动画结束状态 */
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: #ccc;
/* 2.调用动画 */
/* 动画的名字 */
animation-name: move;
/* 动画持续的时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>效果图：
<style>
/* 1.定义动画 */
/* 可以表示多个状态的动画 */
/* 百分比是整数，代表的是持续时间8s的百分之几 */
@keyframes move {
0% {
/* 动画开始状态 */
transform: translate(0,0);
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
/* 动画结束状态 */
transform: translate(0,0);
}
}
div {
width: 200px;
height: 200px;
background-color: #ccc;
/* 2.调用动画 */
/* 动画的名字 */
animation-name: move;
/* 动画持续的时间 */
animation-duration: 8s;
}
</style>
</head>
<body>
<div></div>
</body>2.2 属性
<style>
/* 1.定义动画 */
/* 可以表示多个状态的动画 */
/* 百分比是整数，代表的是持续时间8s的百分之几 */
@keyframes move {
0% {
/* 动画开始状态 */
transform: translate(0,0);
}
100% {
/* 动画结束状态 */
transform: translate(1000px,0);
}
}
div {
width: 200px;
height: 200px;
background-color: #ccc;
/* 2.调用动画 */
/* 动画的名字 */
animation-name: move;
/* 动画持续的时间 */
animation-duration: 8s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数，infinite无限的，默认次数为1次 */
animation-iteration-count: infinite;
/* 是否反方向播放，默认normal，反方向为alternate */
/* animation-direction: alternate; */
/* 动画结束后的状态，默认为回到起始状态backwards，停留在结束状态是forwards */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过停止动画，鼠标离开继续动画 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>2.3 动画的简写
animation：动画名称 持续时间 何时开始 播放次数 是否反方向 动画起始或结束的状态；
- 间歇属性里面不包含animation- play- state
- 暂停动画：animation- play- state：paused； 经常和鼠标经过配合使用
- 使动画走回来，而不是直接跳回起始点：animation- direction；alternate；
- 盒子动画结束后，停在结束的位置：animation- fill-mode：forwards；
<style>
/* 1.定义动画 */
/* 可以表示多个状态的动画 */
/* 百分比是整数，代表的是持续时间8s的百分之几 */
@keyframes move {
0% {
/* 动画开始状态 */
transform: translate(0,0);
}
100% {
/* 动画结束状态 */
transform: translate(1000px,0);
}
}
div {
width: 200px;
height: 200px;
background-color: #ccc;
/* 2.调用动画 */
/* 动画的名字 */
/* animation-name: move; */
/* 动画持续的时间 */
/* animation-duration: 8s; */
/* 运动曲线 */
/* animation-timing-function: ease; */
/* 何时开始 */
/* animation-delay: 1s; */
/* 重复次数，infinite无限的，默认次数为1次 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放，默认normal，反方向为alternate */
/* animation-direction: alternate; */
/* 动画结束后的状态，默认为回到起始状态backwards，停留在结束状态是forwards */
/* animation-fill-mode: forwards; */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* 前2个属性必须要写 */
animation: move 6s linear 1s infinite alternate forwards;
}
div:hover {
/* 鼠标经过停止动画，鼠标离开继续动画 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>2.4 速度曲线animation-timing-function
3. 3D转换
- 近大远小
- 物体后面遮挡不可见
3.1 三维坐标系
3.2 3D移动translate3d
- transform:translateX(100px); 仅仅是在x轴上移动
- transform:translateY(100px); 仅仅是在y轴上移动
- transform:translateZ(100px); 仅仅是在z轴上移动
- transform:translate3d(x,y,z); 分别指向要移动的轴的方向的距离
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 仅在X轴或Y轴或Z轴移动，需要写在一起才能一起移动 */
/* transform: translateX(100px);
transform: translateY(100px); */
transform: translateX(100px) translateY(100px) translateZ(100px);
transform: translate3d(100px,100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>3.3 透视perspective
- 透视也称为视距，就是人眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
- 透视是写在被观察的父盒子上面的
3.4 translateZ
transform:translateZ(100px); 仅仅是在z轴上移动
有了透视，就可以看到translateZ引起的变化
<style>
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin:100px auto;
/* z的值越大，我们所能看到的物体就会越大 */
transform: translateZ(100px);
}
</style>
</head>
<body>
<div></div>
</body>3.5 3D旋转rotate3d
3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
语法：
- transform:rotateX(45deg); 沿着x轴正方向旋转45度
- transform:rotateY(45deg); 沿着y正方向旋转45度
- transform:rotateZ(45deg); 沿着z轴正方向旋转45度
- transform:rotate3d(x,y,z,deg); 沿着自定义轴旋转，deg为角度
左手准则
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 2s;
}
img:hover {
/* 近大远小 */
/* 往里是x轴正半轴，往外是负半轴 */
transform: rotateX(45deg);
}
</style>
</head>
<body>
<img src="media/pig.jpg" alt="">
</body>效果图：
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all .2s;
}
img:hover {
/* 近大远小 */
/* 往里是x轴正半轴，往外是负半轴 */
/* transform: rotateX(45deg); */
transform: rotateY(45deg);
}
</style>
</head>
<body>
<img src="media/pig.jpg" alt="">
</body>效果图：
3.6 3D呈现transform-style
- 控制子元素是否开启三维立体环境
- transform-style:flat; 默认，子元素不开启3d立体空间
- transform-style:preserve-3d; 子元素开启立体空间
- 写给的是父级盒子，但是影响的是子盒子
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>效果图：
扫一扫
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
