首页-教程-Web前端

CSS3怎么实现卡片翻转效果

 3828

方法：1、用animation属性给卡片元素绑定翻转动画；2、用“@keyframes”规则和transform属性设置元素翻转动画动作，语法为“@keyframes 名称{100%{transform:rotateY(翻转角度);}}”。


CSS3怎么实现卡片翻转效果


css3怎么实现卡片翻转效果

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

animation 属性是一个简写属性，用于设置六个动画属性：

  1. animation: name duration timing-function delay iteration-count direction;

示例如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9. img{
  10. animation:fadenum 5s ;
  11. }
  12. @keyframes fadenum{
  13.    100%{transform:rotateY(360deg);}
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <img src="1118.01.png" style="width:150px;height:200px;">
  19. </body>
  20. </html>

输出结果


CSS3怎么实现卡片翻转效果

TAG标签：
本文网址：https://www.zztuku.com/detail-11329.html
站长图库 - CSS3怎么实现卡片翻转效果
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐