学习创作旋转卡片（web)

1；本次学习了创作web页面的旋转卡片效果，参考了up主：“小k师兄”哔哩哔哩；

效果展示：

开始时

鼠标放入卡牌会顺序展开

鼠标长按时选中卡牌会向上浮出，其他卡片会暗沉下去

代码展示

编写思路

1；首先先用div标签将我们要用的每个卡牌设为块。卡牌的外部也为块将其包裹，这里还设置了卡片的i值为后续各卡片不同颜色，位置变化做铺垫

2；再说css渲染

开始位置布局

先是用将我们的位置进行居中，这里的思路是将其整个布局设置为弹性布局display: flex再分别进行水平居中justify-content: center，垂直居中：align-items: center;，这里我们还运用了box-sizing:border-box来规定元素的总宽度与总高度的计算，让其中高度计算为：实际宽度=规定内容宽度+内边距+边框，以此好为我们的卡片设置比例，字体尺寸与背景颜色大家可以根据自己喜好随意设置。

卡片设置样貌与卡片位置的移动

卡片的样貌设置

先是设置宽度 width: 240px;高度：height:360px;设置好后再设置其边框： border: 10px solid rgba(0,0,0,.1);设置其边框基本样式，再修饰它的边框加入点圆角：border-radius: 8px;使其四个角为圆角，再给边框加入点阴影效果：box-shadow: 0 15px 50px rgba(0, 0, 0, .1);后面再弄里面的文本字体大小：font-size: 8em;字与字体的粗细：font-weight: 700;颜色：color: rgba(0,0,0,0);然后将每个卡片都进行绝对定位： position: absolute;让所有卡片都重叠有抽卡的效果；

卡片的移动：

图片中的卡片是鼠标长按再有的移动效果

卡片的移动效果我们主要用transform:效果来实现卡片的X轴与Y轴上的移动

rotate(calc(var(--i)*5deg))实现的是卡片的旋转让其有个铺开效果其中的calc( )是CSS中的一个函数，用于执行一个数学计算，并将结果应用于CSS属性。它允许你以数学表达式的形式指定 CSS 属性值。var(--i)每个卡片的--i值不一样让它们都乘5角度*5deg这样每张卡片旋转的方向都不一样了。然后设置它的旋转中心点： transform-origin: 50% 100%;

translate(calc(var(--i)*120px),-50px);函数还是用来calc( )分别表示X轴位移，Y位移量，这里我们还可以规定它的位移速度（自我理解）：transition: .5s表示过度效果让其有个时间过渡，效果更好看，然后设置它们的颜色变化：filter: hue-rotate(calc(var(--i)*60deg));让每个卡片颜色不一样，这里颜色变化是用的数字计算来变换的。这么上述两点结合就有了卡片铺开效果

这里用来实现长按后位移变化（点到我们选择的卡片后的位移）

translate:calc(var(--i)*20px)-50px;这是位移变化； z-index: 999;这是层级变化，让选中的卡片可以显示再其他卡片上面；

这里运用选择机制修饰当鼠标选择卡片后其他卡牌的变化，我们将其背景颜色都改变为适当颜色就有了选择后其他卡片的暗沉效果