html css让图片自动旋转,html+css图片2D旋转

MyHtml.html

*{margin:0px 0px;padding:0px 0px;}

.page{width: 1040px;

height: 330px;

background:rgba(212, 99, 38, 1);

box-shadow: 1px 1px 10px rgba(153, 129, 26, 1);

margin: 55px auto;

border-radius: 8px;

border: 1px solid rgba(20, 107, 131, 1);}

.page dl{width:200px;text-align:center;

margin:60px 30px 20px 15px;

display:inline-block;/*改变块元素为行内元素不影响宽度 高度 让他们并排*/

}

.page dl .title{font-zixe:35px;line-height:45px;

color:#535353;font-family:"微软雅黑"}

.page dl dd{font-size:14px;line-height:20px;color:#a0a0a0;

font-weight:600;}

.page dl:hover img{

animation:mying 800ms linear;

}

@keyframes mying{

form{transform:roteY(0deg);}

to{transform:rotateY(360deg);}

}

@keyframes mying2{

form{transform:roteX(0deg);}

to{transform:rotateX(360deg);}

}

@keyframes mying3{

form{transform:roteZ(0deg);}

to{transform:rotateZ(360deg);}

}

名师亲授多年教学经验沉淀精讲考试技巧与策略

项目实战实时互动体验全新课堂拉近在线师生沟通距离

作业批改 倾心批改作业 快速反馈结果

推荐工作 全职就业保障就业专业指导服务