dom元素版本：正面和背面两个div，背面默认旋转180°并隐藏背面，达到看不见背面的效果，然后点击卡片翻转，旋转180°
`<!DOCTYPE html>
<html>
<head>
<title>SVG 3D Card Flip Effect</title>
<style type="text/css">
.container {
width: 200px;
height: 200px;
perspective: 1000px;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.card .front,
.card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.card .front {
transform: rotateY(0deg);
}
.card .back {
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
.card .back h1{
text-align:center;
margin-top:50%;
}
.card .front h1{
text-align:center;
margin-top:50%;
}
.card .back p{
text-align:center;
margin-top:-20%;
}
.card .front p{
text-align:center;
margin-top:-20%;
}
</style>
</head>
<body>
<div class="container">
<div class="card" onclick="this.classList.toggle('flipped')">
<div class="front">
<h1>Front</h1>
<p>Click to flip</p>
</div>
<div class="back">
<h1>Back</h1>
<p>Click to flip back</p>
</div>
</div>
</div>
</body>
</html>`
svg元素版本：点击卡片翻转
svg设置背面不可见无效，改用display方法实现：一个正面一个背面，默认情况下背面旋转180°并且隐藏；当点击卡片后，设置旋转180°，背面显示，正面隐藏；其中svg元素的旋转中心设置：transform-box: fill-box; transform-origin: center center;
`<!DOCTYPE html>
<html>
<head>
<title>Card Flip</title>
<style type="text/css">
.container {
perspective: 1000px;
transform-style: preserve-3d;
}
.card {
transform-style: preserve-3d;
transition: transform 1s;
transform-box: fill-box;
transform-origin: center center;
}
.card .front,
.card .back {
backface-visibility: hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
transform-style: preserve-3d;
transform-box: fill-box;
transform-origin: center center;
}
.card .front {
transform: rotateY(0deg);
}
.card .back {
transform: rotateY(180deg);
display:none
}
.card.flipped {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
style="width: 100%; height: 100%" viewBox="0 0 1900 798">
<g x="0" y="400" width="300" height="300" class="container">
<g class="card" onclick="this.classList.toggle('flipped')">
<g class="front">
<rect x="0" y="40" stroke="#000" fill="#fff"
width="80" height="80" stroke-width="3" rx="5" ry="5" cursor="pointer">
</rect>
<circle cx="50" cy="80" r="14" stroke="none"
fill="red" cursor="pointer"/>
<text x="10" y="80" fill="blank" text-anchor="middle" font-size="17">正</text>
</g>
<g class="back">
<rect x="0" y="40" stroke="#000" fill="#fff"
width="80" height="80" stroke-width="3" rx="5" ry="5" cursor="pointer">
</rect>
<circle cx="20" cy="80" r="14" stroke="none"
fill="blue" cursor="pointer"/>
<text x="20" y="80" fill="blank" text-anchor="middle" font-size="17">反</text>
</g>
</g>
</g>
</svg>
<script>
var flag = false;
var front = document.querySelector('.front');
var back = document.querySelector('.back');
var card = document.querySelector('.card');
card.addEventListener("click", function(){
flag=!flag;
if(flag){
front.style.display = "none";
back.style.display = "block";
}else{
back.style.display = "none";
front.style.display = "block";
}
})
</script>
</body>
</html>`
svg点击卡片上的圆圈翻转：
`<!DOCTYPE html>
<html>
<head>
<title>Card Flip</title>
<style type="text/css">
.container {
perspective: 1000px;
}
.card {
transform-style: preserve-3d;
transition: transform 1s;
transform-box: fill-box;
transform-origin: center center;
}
.card .front {
transform-style: preserve-3d;
transform-box: fill-box;
transform-origin: center center;
transform: rotateY(0deg);
}
.card .back {
transform-style: preserve-3d;
transform-box: fill-box;
transform-origin: center center;
transform: rotateY(180deg);
display:none
}
.card.flipped {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
style="width: 100%; height: 100%" viewBox="0 0 1900 798">
<g x="0" y="400" width="300" height="300" class="container">
<g class="card" >
<g class="front">
<rect x="0" y="40" stroke="#000" fill="#fff"
width="80" height="80" stroke-width="3" rx="5" ry="5" cursor="pointer">
</rect>
<circle cx="50" cy="80" r="14" stroke="none"
fill="red" cursor="pointer" class="circle"/>
</g>
<g class="back">
<rect x="0" y="40" stroke="#000" fill="#fff"
width="80" height="80" stroke-width="3" rx="5" ry="5" cursor="pointer">
</rect>
<circle cx="20" cy="80" r="14" stroke="none"
fill="blue" cursor="pointer" class="circle2"/>
</g>
</g>
</g>
</g>
</svg>
<script>
var flag = false;
var front = document.querySelector('.front');
var back = document.querySelector('.back');
var card = document.querySelector('.card');
var circle = document.querySelector('.circle');
var circle2 = document.querySelector('.circle2');
circle.addEventListener("click", function(){
card.classList.toggle('flipped')
setTimeout(function(){
flag=!flag;
if(flag){
front.style.display = "none";
back.style.display = "block";
}else{
back.style.display = "none";
front.style.display = "block";
}
}, 400 )
})
circle2.addEventListener("click", function(){
card.classList.toggle('flipped')
setTimeout(function(){
flag=!flag;
if(flag){
front.style.display = "none";
back.style.display = "block";
}else{
back.style.display = "none";
front.style.display = "block";
}
}, 400 )
})
</script>
</body>
</html>`
