html5--6-56 阶段练习5-翻转效果

学习要点

运用所学过的知识完成一个简单的小练习，理解对动画的应用。

1 @charset="UTF-8"; 2 *{ 3     margin:0; 4     padding:0; 5 } 6 img{ 7     width: 150px; 8     height: 210px; 9     border: 3px groove orange;10 }11 12 div{13     width: 150px;14     margin-left: auto;15     margin-right: auto;16     margin-top: 50px;17     animation: fz 6s infinite;18 }19 20 body{21         perspective: 500px;22 }23 @keyframes fz{24 25     0%{26         transform: rotateY(45deg);27     }28 29 30     20%{31         transform: rotateY(180deg);32     }33 34 35     40%{36         transform: rotateY(360deg);37     }38 39 40     60%{41         transform: rotateX(45deg);42     }43 44     80%{45         transform: rotateX(180deg);46     }47 48     90%{49         transform: rotateX(360deg);50     }51 52     100%{53         transform: rotateX(360deg);54     }55 }

1  2  3  4     
      5     6-56课堂演示 6     
      7  8  9     
     
      10             
      11     
     
12 13

转载于:https://www.cnblogs.com/Renyi-Fan/p/8030229.html

你可能感兴趣的文章

将Excel文件中的数据导入到mysql【Excel中拼sql】

Yaf框架的扩展-mvc-路由配置-模版视图smarty加载

查看>>

单行文本溢出and多行文本溢出...以省略号展现

查看>>

MYSQL语句

查看>>

Android WebView 详解（持续更新)

查看>>

ElasticSearch动态添加节点及相关配置项

查看>>

Android studio 使用心得(十)---android studio 多渠道打包(三)

查看>>

数据库选型的一些看法

查看>>