元素旋转
初始值
变形 透视距离800符合人眼的
transform:perspective(800px) rotateY(0deg);
默认沿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;
}
/*沿着左中*/
div:nth-child(1){
transform-origin:left center;
}
/*沿着左上*/
div:nth-child(2){
transform-origin:left top;
}
/*沿着左上*/
div:nth-child(3){
transform-origin:50px 50px;
}
div:hover{
/*rotate 旋转 负值是逆时针旋转*/
transform:rotate(-90deg);
}
背面可见
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);
背面隐藏
backface-visibility:hidden;
}
鼠标移入时沿着Y轴旋转
.con:hover .box{
transform:rotateY(180deg);
}
图片翻面
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;
}
animation动画
.box{
width:100px;
height:100px;
background-color:gold;
/*设置次数 6， 或者infinite无数次 ，alternate原路返回， both起始， forwords 动画停留在最后一帧 ，backwords 动画显示之前就从from开始，第一个1s是动画播放时间，第二个1s 是指延迟时间*/
animation:moving 1s ease 1s 6 alternate both ;
播放状态 paused 是暂停
animation-play-state:paused;
}
.box:hover{
播放状态 running是运动
animation-play-state:running;
}
定义动画的关键字keyframes
@keyframes moving{
from开始 to结束
from{
width:200px;
}
to{
width:500px;
}
}
人物走路动画
.box{
width:120px;
height:182px;
border:1px solid #000;
margin:50px auto 0;
overflow 隐藏溢出的
overflow:hidden;
相对定位 子元素要参照父元素定位
position:relative;
}
.box img{
绝对定位 子元素参照父元素的定位 定位
position:absolute;
left:0;
top:0;
animation:walking 1s steps(8) infinite ;
}
@keyframes walking{
from{
left:0;
}
to{
left:-960px;
}
}
