默认沿Z轴旋转
transform: rotate(45deg);
沿X轴旋转
transform: rotateX(45deg);
沿Y轴旋转
transform: rotateY(45deg);
设置3d的样式按3d空间显示
transform-style:preserve-3d;
变形中心点
一共有三个div块
div{
width:200px;
height:200px;
background-color:gold;
float:left;
margin:30px;
transition:all 500ms ease;
}
背面可见
box是con的子元素
.con{
width:300px;
height:300px;
margin:50px auto 0;（当con设置了box不设置）
border:1px solid black;
}
.box{
width:300px;
height:300px;
background-color:gold;
垂直居中
text-align:center;
line-height:300px;
font-size:50px;
盒子居中
margin: 50px auto 0;
transition:all 500ms ease;
按照3d空间的效果显示
transform-style:preserve-3d;
设置透视距离符合人眼 初始值
transform:perspective(800px) rotateY(0deg);
图片翻面
pic 和 info 是con的子元素
pic和info是兄弟元素
.con{
width:666px;
height:666px;
margin:100px auto 0;
相对定位
position:relative;
transform-style:preserve-3d;
transform:perspective(800px) rotateY(0deg);
}
.pic, .info{
width:666px;
height:666px;
绝对定位
position:absolute;
原点设置为00
left:0;
top:0;
}
.info{
background-color:gold;
text-align:center;
line-height:666px;
translate 沿着Z轴浮起来2个位移 位移
transform:translateZ(2px) rotateY(180deg);
背面隐藏
backface-visibility:hidden;
}
@keyframes 定义关键帧动画
animation-name 动画名称
animation-duration 动画时间
animation-duration 动画时间
animation-timing-function 动画曲线
linear 匀速
ease 开始和结束是慢速
ease -in 开始时是慢速
easa-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
animation-delay 动画延迟
animation-iteration-count 动画播放次数 nlinfinite
7、animation-direction
normal 默认动画结束不返回
Alternate 动画结束后返回
8、animation-play-state 动画状态
paused 停止
running 运动
9、animation-fill-mode 动画前后的状态
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
