空间(3d)转换 tramsform: 值 ;
移动 tramsform:translate3d(x,y,z);
- 添加位移属性
transform: translate3d(x轴, y轴, z轴);
- 给盒子父元素添加(perspective视距)视距,实现Z轴转换
- 视距
perspective:值;
人眼到屏幕的距离,一半约800px-1200px
body {
/* 视距,是屏幕距眼睛的距离,添加到父元素上, 一般是800px-1200px */
perspective: 1000px;
}
.box {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 200px auto;
transition: all 1s;
}
.box:hover {
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(200px);
/* transform: translate3d(x轴, y轴, z轴); */
transform: translate3d(100px, 100px, 100px);
}
旋转 rotateX() rotateY() rotateZ()
左手法则 : 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
- 旋转属性:
transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
- 旋转属性连写:
rotate3d(x,y,z,度数)
x,y,z取值0-1
立体呈现
给父元素添加 transform-style:preserve-3d;
使子元素处于3d空间
<head>
<style>
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
/* 使子元素处于真正的3d空间,添加到父元素上 */
transform-style: preserve-3d;
transition: all 3s;
}
.box:hover {
transform: rotateY(360deg);
}
.box div {
position: absolute;
width: 100%;
height: 100%;
}
.front {
background-color: skyblue;
}
.back {
background-color: pink;
transform: translateZ(-300px);
}
</style>
</head>
<body>
<div class="box">
<div class="back">后面</div>
<div class="front">前面</div>
</div>
</body>
动画 animation
多个状态间的变化过程,动画过程可控
使用动画
- 定义动画
@keyframes 动画名称 {}
- 调用动画
animation : 值 ;
.box {
width: 200px;
height: 200px;
background-color: #f00;
border-radius: 50%;
/* 2.调用动画 */
animation: move 1s infinite;
}
/* 1.定义动画 */
@keyframes move {
/* 可以使用百分比来设置每个时刻的状态
0% { */
from {
transform: translate(0);
}
/* 100% { */
to {
transform: translate(500px);
}
}
动画属性 animation-
animation-name: 值 ;
调用动画的名称animation-duration : 值 ;
动画播放的时长animation-delay : 值 ;
延迟 动画等待多久执行animation-fill-mode : 值 ;
forwards
停在最后一帧backwards
默认值 停在第一帧animation-timing-function : 值 ;
linear 匀速 速度曲线animation-iteration-count : 值 ;
写数值表示播放次数infinite
循环播放animation-direction : 值 ;
动画执行方向alternate
反向播放 逆播animation-play-state : 值 ;
动画暂停paused
暂停