2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
- 移动:translate
- 旋转:rotate
- 缩放:scale
1.移动(translate)
语法:
transform.translate(x,y); 或者分开写
transform.translateX(n);
transform.translateY(n);
重点
- translate最大优点:不影响到其他元素位置
- translate中的百分比单位是相对自身元素的 translate:(50%,50%);
- 对行内标签没有效果
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transform: translate(100px,100px); */
/* 1.移动x坐标 */
/* transform: translate(100px,0); */
/* transform: translateX(100px); */
/* 2.移动y坐标 */
/* transform: translate(0,100px); */
/* transform: translateY(100px); */
/* 3.参数为百分比时 移动的距离是盒子自身的宽度或者高度来对比的 */
transform: translateY(50%); /* 这里的50%就是50px,因为盒子宽度是100px */
}
</style>
2.旋转(rotate)
语法:transform:rotate(参数);
重点
- rotate里面跟度数,单位是deg 比如 rotate(45deg);
- 角度为正时顺时针,为负时,逆时针
- 默认旋转中心点是元素的中心点
<style>
img {
width: 150px;
transition: all 1s; /* 过渡 */
}
img:hover {
/* 顺时针旋转45度 */
transform: rotate(45deg);
}
</style>
3.中心点(transform-origin)
语法: transform-origin: x y;
重点:
- 注意后面参数空格隔开
- x y 默认转换的中心点是元素的中心(50% 50%)
- 可以给x y 设置 像素 或者 方位词(top bottom left right center)
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/* transform-origin: left bottom; */
/* transform-origin: 200px 200px; */
transform-origin: 50% 50%; /* 等价于 center center */
}
div:hover {
transform: rotate(360deg);
}
</style>
4.缩放(scale)
语法: transform:scale(x, y);
注意:
- x y 用逗号分隔
- transform:scale(1, 1):宽高都放大一倍,相当于没有放大
- transform:scale(2, 2):宽和高都放大了2倍
- transform:scale(2):只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2, 2)
- transform:scale(0.5, 0.5):缩小
- scale最大的优势:可以设置转换中心点缩放,默认中心点缩放,而且不影响其他盒子
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:hover {
/* transform: scale(2,2); */
/* transform: scale(2); */
/* transform: scale(2,1); */
/* transform: scale(0.5,0.5); */
transform: scale(0.5);
}
</style>
5.综合写法
注意:
- 格式:transform: translate() rotate() scale()...等
- 顺序会影响转换效果 (先旋转会改变坐标轴方向)
- 同时有位移和其他属性时,要将位移放到最前面,防止顺序不同带来的影响
<style>
div:hover {
transform: translate(150px,50px) rotate(180deg) scale(1.2)
}
</style>
CSS3 动画
**动画(animation)**时CSS3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多的控制,连续自动播放等效果。
动画的基本使用
1.先定义动画
2.再使用(调用)动画
1.用keyframes定义动画(类似定义类选择器)
<style>
@keyframes name{
/* 开始状态 */
0% {
}
/* 结束状态 */
100% {
}
}
</style>
动画序列:
- 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。
- 用百分比规定变化发生的时间,或用关键字”form“和”to“,等同于0%和100%
2.元素使用动画
<style>
@keyframes move{
0% {
transform: translate(0,0);
}
50% {
transform: translate(1000px,0);
}
100% {
transform: translate(2000px,0);
}
}
div {
width: 200px;
height: 200px;
backfround-color: pink;
animation-name: move; /*动画名称*/
animation-duration:2s;/*持续时间*/
}
</style>
动画常用属性
1.属性
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所以动画的简写属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画的名称 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是0 (必须) |
animation-timing-function | 规定动画的速度曲线,默认是”ease" |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite |
animation-direction | 规定动画是否在下一个周期逆向播放,默认是“normal”,alternate逆播放 |
animation-play-state | 规定动画是否正在运行或暂停,默认是“running”,还有“paused” |
animation-fill-mode | 规定动画结束后的状态,保持原位置forward,回到起始backwards |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
@keyframes move{
/* 开始状态 */
0% {
}
/* 结束状态 */
100% {
transform: translate(100px,0);
}
}
div {
background-color: pink;
width: 200px;
height: 200px;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 */
animation-iteration-count: infinite;
/* 是否反向播放 默认是 normal 如果需要反方向就写 alternate */
animation-direction: alternate;
/* 动漫结束后的状态 默认是 backwards(回到起始状态) 也可以停留在原状态 forwads */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过div 让这个div 停止动画,鼠标离开就继续动画 */
animation-play-state: paused;
}
</style>
<body>
<div></div>
</body>
</html>
2.动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态;
animation: myfirst 5s linear 2s infinite alternate
- 简写属性里不包括animation-play-state(经常和鼠标经过等其他配合使用)
- 注意时间的顺序(持续时间和何时开始)不能颠倒,其他没有严格要求
3.速度曲线细节
值 | 描述 |
---|---|
linear | 动画从头到尾的速度相同,匀速 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长) |
- steps()就是分几步完成动画,有了steps()就不要写ease 或者 linear了
3D转换
- 3D位移:translate3d(x,y,z)
- 3D旋转:rotate3d(x,y,z)
- 透视:perspective
- 3D呈现:transform-style
1.3D位移
- transform:translateX(100px) : 仅仅在X轴上移动
- transform:translateY(100px) : 仅仅在Y轴上移动
- transform:translateZ(100px) : 仅仅在Z轴上移动
- transform:translate3d(x,y,z) : x,y,z分别指移动的方向距离
2.3D旋转
- transform:rotateX(45deg):沿着X轴旋转45度
- transform:rotateY(45deg):沿着Y轴旋转45度
- transform:rotateZ(45deg):沿着Z轴旋转45度
- transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度(了解即可)
注意:transform:rotate3d(x,y,z,deg)中x,y,z是表示旋转轴的矢量
eg: transform:rotate3d(0,1,0,45deg) 沿着Y轴旋转45度
transform:rotate3d(1,1,0,45deg) 沿着X轴Y轴的对角线旋转45度
3.透视
perspective()
4.3D呈现
transform-style: flat | preserve-3d
注意:
- 控制子元素是否开启三维立体环境
- transform-style: flat;子元素不开启3d立体空间 默认的
- transform-style: preserve-3d; 子元素开启立体空间
- 代码写给父级(包括父级的父级),但影响的是子盒子
旋转照片案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
perspective: 1000px;
}
section div img {
width: 300px;
height: 200px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
/* 添加动画 */
animation: rotate 20s linear infinite;
}
section:hover {
/* 鼠标放上去停止 */
animation-play-state: paused;
}
@keyframes rotate{
from{
transform: rotateY(0);
}
to{
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: url(旋转照片/1.jpg) no-repeat; */
}
section div:nth-child(1) {
transform: translateZ(300px);
}
section div:nth-child(2) {
/* 先算转再移动 */
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
/* 先算转再移动 */
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
/* 先算转再移动 */
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
/* 先算转再移动 */
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
/* 先算转再移动 */
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div><img src="旋转照片/1.jpg" alt=""></div>
<div><img src="旋转照片/2.jpg" alt=""></div>
<div><img src="旋转照片/3.jpg" alt=""></div>
<div><img src="旋转照片/4.jpg" alt=""></div>
<div><img src="旋转照片/5.jpg" alt=""></div>
<div><img src="旋转照片/6.jpg" alt=""></div>
</section>
</body>
</html>