时间：2023-09-27 16:12:01 | 来源：网站运营
时间：2023-09-27 16:12:01 来源：网站运营
html + css + js 制作卡片旋转效果：
在线咨询
.card { transfrom-style: preserve-3d;}这样就可以设置卡片的正面与反面，也就是说一个卡片的HTML结构应如下：<body> <div class="card"> <div class="front"></div> <div class="back"></div> </div></body>这样写之后，网页变成这样：.front,.back { position: absolute;}然后发现，网页变成了这样：.back { translate: rotateY(180deg);}网页变成了这样：.front,.back { position: absolute; backface-visibility: hidden;}卡片成功正确显示：.back { backface-visibility: hidden;}到这里，卡片的编写已经完成，接下来要考虑如何让它有旋转的效果。.card { transfrom-style: preserve-3d; /* 后面的秒数代表从初始到终止的历时 */ transition: 1s;}现在万事具备，只欠东风<script> window.onload = function(){ var card = document.getElementsByClassName('card')[0]; card.onclick = function(){ this.classList.toggle('flipped'); } }</script>.flipped { translate: rotateY(180deg);}<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="card.css"> <title>卡片旋转效果</title> <script> window.onload = function(){ var card = document.getElementsByClassName('card')[0]; card.onclick = function(){ this.classList.toggle('flipped'); } } </script></head><body> <div class="card"> <div class="front"></div> <div class="back">hello</div> </div></body></html>2.css* { margin: 0; padding: 0;}.card { height: 270px; width: 270px; margin: 40px auto; /* 使该盒子具有3D属性 */ transform-style: preserve-3d; /*动画效果历时1秒 */ transition: 1s; /* 使具有旋转效果 */ perspective: 1000px;}.front { width: 100%; height: 100%; background-image: url('./img/youli.jpg');}.back { width: 100%; height: 100%; background-color: aqua; color: white; font-size: 26px; text-align: center; line-height: 270px; /* 让在背面显示的内容转到背面 */ transform: rotateY(180deg);}.front,.back { /* 让卡片背面与正面重合 */ position: absolute; /* 隐藏卡片背面 */ backface-visibility: hidden;}/* 点击时切换的样式 */.flipped { transform: rotateY(180deg);}关键词：卡片,旋转,效果
