这段代码创建了一个具有 3D 翻转效果的卡片，通过 CSS 技术实现了卡片的翻转效果，为页面添加了视觉吸引力和用户交互体验
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你
演示效果
HTML&CSS
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardytitle>
<style>
body {
margin: 0;
padding: 0;
background: #212121;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: 240px;
height: 250px;
perspective: 900px;
}
.card {
height: 100%;
width: 100%;
background-color: aliceblue;
position: relative;
transition: transform 1500ms;
transform-style: preserve-3d;
border-radius: 2rem;
}
.container:hover>.card {
cursor: pointer;
transform: rotateY(180deg) rotateZ(180deg);
}
.front,
.back {
height: 100%;
width: 100%;
border-radius: 2rem;
position: absolute;
box-shadow: 0010px2pxrgba(50, 50, 50, 2.5);
backface-visibility: hidden;
color: aliceblue;
background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100%);
}
.front,
.back {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 20px;
}
.back {
transform: rotateY(180deg) rotateZ(180deg);
}
.front-heading {
font-size: 28px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bold;
z-index: 999;
}
.front-content {
font-size: 20px;
z-index: 999;
}
.back-content {
padding: 10px;
font-size: 16px;
text-align: left;
text-indent: 2em;
}
.img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 2rem;
}
style>
head>
<body>
<div class="container">
<div class="card">
<div class="front">
<img class="img" src="./3D相册/img/p2.jpg" alt="">
<p class="front-heading">2025p>
<p class="front-content">颜值不掉，钱包不倒p>
div>
<div class="back">
<p class="back-content">祥光焕彩，瑞气盈庭，乙巳新岁已至。愿你心向暖阳，无畏风霜，目之所及皆为美好，心之所向皆能如愿。于时光长河中，静享岁月的诗意与温柔。p>
div>
div>
div>
body>
html>
HTML 结构CSS 样式
行内元素和块级元素
在html中，元素主要分为行内元素和块级元素；
行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。
块级元素写完后会自动换行，有宽高可以修改。
还有一种特殊的元素叫做行内块元素。
大致分内是：
行内元素有：heda meta title lable span br a style em b i strong
块级元素有：body form select textarea h1-h6 html table button hr p ol ul dl cnter div
行内块元素常见的有： img input td
在标准文档流里面，块级元素具有以下特点：
①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。
行内元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
内联元素：可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。
块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。
例如：我们可以给div或p应用下面样式，但是a标签却无法应用下面的样式。
.test{width:100px; height:100px;}
当然我们还可以通过样式display属性来改变元素的显示方式。
当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。
所以我们可以给a标签应用以下样式：
.test{display:block; width:50px; height:50px;}
另外，如果我们即想让一个元素可以设置宽度高度，又想让它以行内形式显示，这时我们可以设置display的值为inline-block。如：
a{display:inline-block; width:100px; height:100px;}
怎样区分标准模式和混杂模式
浏览器根据DOCTYPE（文档声明）是否存在以及使用那种DTD来选择要使用的呈现方式。
如果XHTML和HTML文档保航形式完整的DOCTYPE，那么它一般以标准模式呈现。相反，如果文档的DOCTYPE不存在或者形式不正确则导致HTML和XHTML以混杂模式呈现
标准模式下盒子的实际宽度为：
width + padding-left + padding-right + border-left-width + border-right-width
实际高度为：
heigth + padding-top +padding-bottom + border-top-width + border-bottom-width
混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。
