目录
1 CSS 2D转换
同时又位移和其他属性,我们需要把位移放到最前面
1.1 2D转换之移动translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
语法:
transform: translate(x,y); 或者分开写
transform:transformX(n);
transform:transformY(n);
重点:
- 定义2D转换中的移动,沿着X和Y轴移动元素
- translate最大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%)
- 对行内标签没有效果
可以配合定位给大盒子内的小盒子水平垂直居中。
1.2 2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法:
transform: rotate(高度)
重点:
- rotate里面跟度数,单位是deg 比如rotate(45deg)
- 角度为正时,顺时针,负时,为逆时针
- 默认旋转的中心点是元素的中心点
1.3 2D转换中心点transform-origin
我们可以设置元素转换的中心点
语法:
transform-origin:x y;
重点:
- 注意后面的参数x和y用空格隔开
- x y默认转换的中心点事元素的中心点(50% 50%)
- 还可以给x y设置 像素 或者 方位名词 (top bottom left right center)
1.4 2D转换之缩放scale
语法:
transform:scale(x,y);
重点:
- transform:scale(2,2);等价于transform:scale(2);
- transform:scale(0.5,0.5):缩小
- scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。
2 CSS动画
制作动画分为两步:
- 先定义动画
- 再使用(调用)动画
2.1 定义动画
用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
动画序列
- 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。
- 请用百分比来规定变化发生的时间,或用关键词from和to,等同于0%和100%。
2.2 元素使用动画
调用动画
animation-name:动画名称;
animation-duration:持续时间;
3 动画常用属性
元素可以添加多个动画,用逗号隔开。
animation:bear 1s step(8) infinite,move 3s forward;
动画常用属性
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animtion | 所有动画属性的简写属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画的名称(必须的) |
animtion-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是0.(必须的) |
animation-timing-function | 规定动画的速度曲线,默认是ease |
animtion-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite(无限) |
animtion-direction | 规定动画是否在下一周期逆向播放,默认是normal ,alternate逆播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是running 还有pause |
animtion-fill-mode | 规定动画结束后状态,保持forwards,回到起始backwards |
动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态.
animation: myfirst 5s linear 2s infinite alternate;
注意:
- 简写属性里面不包括animation-play-state
- 暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用
- 想要动画走回来,而不是直接跳回来:animation-direction:alternate
- 盒子动画结束后,停在结束为止:animation-fill-mode:forwards
animation-timing-function:规定动画的速度曲线,默认是“ease”
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。匀速 |
ease | 默认,动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长) |
4 3D 转换
4.1 3D移动translate3d
语法:
transform:translateX(100px); 仅仅是在x轴上移动
transform:translateY(100px); 仅仅是在y轴上移动
transform:translateZ(100px); 仅仅是在z轴上移动(注意:translateZ一般用px单位)
transform:translate3d(x,y,z); 其中x y z 分别指要移动的轴的方向的距离
4.2 透视 perspective
4.3 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度
xyz表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。
eg: transform:rotate3d(1,1,0,45deg) 沿着对角线旋转45deg
4.4 3D呈现 transform-style
控制子元素是否开启三维立体环境
transform-style:flat 子元素不开启3d立体空间 默认的
transform-style:preserve-3d; 子元素开启立体空间
代码写给父级,但是影响的是子盒子
4.4 案例代码
刚开始界面显示橙色
鼠标移动到盒子盒子向x轴正方形旋转90度,呈现底下的蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
height: 55px;
width: 200px;
margin: 100px auto;
list-style: none;
}
.box{
position: relative;
width: 100%;
height: 100%;
/*子元素开启立体空间,呈现3D效果*/
transform-style: preserve-3d;
/*过渡*/
transition: all 0.4s;
}
.box:hover{
/*鼠标移动到盒子,盒子沿x轴旋转90度*/
transform: rotateX(90deg);
}
.front,.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.front{
background-color: #ff7c2d;
z-index: 1;
transform: translateZ(27.5px);
}
.back{
background-color: #00a4ff;
/* 这个x轴一定是负值 */
/* 我们如果有移动 或者其他样式,必须先写我们的移动 */
transform: translateY(27.5px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front"></div>
<div class="back"></div>
</div>
</li>
</ul>
</body>
</html>