旋转卡片魔术 旋转卡片怎么做

答案是使用CSS的变换、旋转和过渡或@keyframes实现场景反转动画。1. HTML结构包含正背面两个div；2. 父容器设置perspective创建3D空间，配置transform-style：preserve-3d；3. 正背面绝对定位，背面初始rotateY(180deg)并隐藏反面；4. 通过：悬停触发卡的rotateY(180deg)配合转场实现平滑翻转，或用@keyframes定义动画帧，结合JavaScript触发动画类，保证视觉连贯性与交互动作。

使网页中的姿势实元素CSS变换、旋转和@keyframes配合完成。整个过程并不难，关键是设置好3D变换环境和旋转关键帧。

1. 基础结构：HTML控件容器

先写一个简单的控件结构，包含正面和背面两个面：lt；div class=quot；cardquot；gt；lt；div class=quot；card-face frontquot；gt；正面lt；/divgt；lt；div class=quot；card-face backquot；gt；背面lt；/divgt；lt；/divgt；登录后复制2. 设置3D空间与翻转容器

CSS中必须要启用3D转换，在父容器上使用透视，片设置transform-style：preserve-3d: 100；position：absolute；backface-visibility：hidden；/lt；emgt；隐藏背面时不可见lt；/emgt；/border-radius：10px；display：flex；align-items：center；justify-content：center；font-size： 18px；font-weight： front {background：#3498db；color：白色；}lt；/pgt；lt；pgt；.back {background：#e74c3c；color：white；transform:rotateY(180deg)；/lt；emgt；背面初始旋转180度lt；/emgt；/}lt；/pgt；登录后复制3. 使用 @keyframes 定义旋转动画

通过 @keyframes 0 { 0 { transform：rotateY(0deg)； } 100 {transform：rotateY(180deg)； }}lt；pgt；.card：hover .front {animation：cardFlip 0.6s向前；}lt；/pgt；lt；pgt；.card：hover .back {animation：cardFlip向前 0.6 秒；animation-delay： 0.6 秒； /lt；emgt； 等正面翻转完再显示背面 lt；/emgt；/}lt；/pgt；登录后复制

上面代码会让反转在停悬时正面正面，背面延迟出现。但更推荐的方式是直接对整个反转做变换，而不是分别动画两个面。

超能文献

超能文献是一款革命性的AI驱动医学文献搜索引擎。 105 了解更多

改进方案：把动画应用在包裹层：.card-container { width： 200px； height： 300px；perspective： 1000px；}lt；pgt；.card {width： 100；height： 100；position：relative；transform-style： keep-3d；过渡： 变换 0.6s 缓动；}lt；/pgt；lt；pgt；.card：悬停 {transform:rotateY(180deg)；}lt；/pgt；lt；pgt；.front， .back {宽度： 100；高度： 100；位置：绝对；背面可见性：隐藏；边框半径： 10px；显示： flex；对齐项： 中心；对齐内容：中心；字体大小： 18px；字体粗细：粗体；}lt；/pgt；lt；pgt；.front {background：#3498db；color：white；}lt；/pgt；lt；pgt；.back {background：#e74c3c；color：white；transform：rotateY(180deg)；}lt；/pgt；登录后复制

这种方式更简洁，用@keyframes绘制，用transition实现平滑过渡。

但如果坚持用@keyframes，可以这样定义：@keyframes FlipIn { from {transform：rotateY(0deg)；} to {transform：rotateY(180deg)；}}lt；pgt；.card.animated {animation：flipIn 0.6s escape forwards；}lt；/pgt；登录后复制

然后通过JavaScript添加类触发动画：document.querySelector('.card').addEventListener('click'， function() { this.classList.toggle('animated')；})；登录后复制4. 关键点总结透视确保子元素保持3D空间backface-visibility：隐藏避免翻转时反面内容背面元素最终应rotateY(180deg)动画可用过渡（交互）或@keyframes（精确控制）

匿名CSS中制作旋转动画_transform旋转@keyframes实现效果的详细，更多内容请关注乐哥网相关相关文章！ 相关标签： css javascript java html ssl ai绝对定位JavaScript css html transition 大家都在看： css中flex-flow属性是什么 css中counter-reset属性是什么 css中word-break属性是什么 css相邻选择器是什么 css中flex-basis属性是什么