CSS中的Keyframes是让我们可以制作一些动画效果的利器。本文将介绍如何用CSS制作三张图片翻转的动画效果。/* 先定义一个规则集 */ .flip { perspective: 1000px;
CSS中的Keyframes是让我们可以制作一些动画效果的利器。本文将介绍如何用CSS制作三张图片翻转的动画效果。
/* 先定义一个规则集 */ .flip { perspective: 1000px; /* 定义3D景深 */ position: relative; /* 定义相对定位 */ width: 200px; /* 定义宽度 */ height: 260px; /* 定义高度 */ } /* 翻转的正面 */ .flip .front { position: absolute; /* 定义绝对定位 */ transform-style: preserve-3d; /* 子元素成为3d环境 */ width: 100%; /* 宽度占满 */ height: 100%; /* 高度占满 */ backface-visibility: hidden; /* 隐藏背面 */ z-index: 2; /* 把正面放在上面 */ } /* 翻转的背面 */ .flip .back { position: absolute; /* 定义绝对定位 */ transform-style: preserve-3d; /* 子元素成为3d环境 */ transform: rotateY(180deg); /* 让背面翻转 */ width: 100%; /* 宽度占满 */ height: 100%; /* 高度占满 */ backface-visibility: hidden; /* 隐藏正面 */ } /* 定义图片 */ .flip .front img, .flip .back img { width: 100%; /* 宽度占满 */ height: 100%; /* 高度占满 */ } /* 开始定义动画 */ @keyframes flip { 0% { transform: rotateY(0deg); /* 初始状态 */ } 50% { transform: rotateY(90deg); /* 变成翻转的状态 */ } 100% { transform: rotateY(180deg); /* 完整翻转的状态 */ } } /* 规定翻转时间 */ .flip:hover .front { animation: flip 1s ease-in-out forwards; /* 鼠标hover时前面翻转 */ } .flip:hover .back { animation: flip 1s ease-in-out forwards; /* 鼠标hover时后面翻转 */ }
以上代码定义了一个Flip的规则集,包括正面、背面和图片样式的定义,以及翻转动画的实现。在鼠标hover时,分别触发正面和背面的翻转动画,让整个元素呈现3D效果。
粉丝
0
关注
0
收藏
0