预计效果

但鼠标移动到相应的卡牌的时候，卡牌会自动翻转过去；当鼠标移走时，卡牌会自动盖上

结构分析

正面和背面分别用两个div显示，长度和宽度设置相同，使之完全重叠，这样就可以将position属性设置为absolute，即可以将两个div重叠在一起。
运用CSS的transform属性，用rotate将其旋转过来【旋转方向以空间直角坐标系为参考，即垂直旋转沿Y轴方向，transform的设定值为rotateY()】
backface-visibility的设定（用控制HTML 元素的“背面”能不能被看到）
首先新增一张图片，然后用transform rotateY将它旋转，当我们旋转角度超过90°时，我们就能看到它的背面然后将backface-visibility设置为hidden，然后图片就被隐藏起来了
perspective的设定（立体透视深度）
没有设置透视深度的旋转看到上去并不立体
设置perspecitve的两种方法：
①在transform的设定值里面加上perspective，这种方法会直接将perspective的设定直接套用到指定的HTML元素里面
②用一个HTML元素，例如一个div将所有元素包在一起，然后直接设定perspective这个属性，这样就可以统一将元素里的内容设定相同的perspective

参考代码

<!DOCTYPE html>
<html lang="en">
<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"><title>Document</title><link rel="stylesheet" href="./style.css">
</head>
<body><div class="card-container"><div class="cover">COVER</div>          <div class="back">BACK</div>           </div><div class="card-container"><div class="cover">COVER</div>          <div class="back">BACK</div>           </div><div class="card-container"><div class="cover">COVER</div>          <div class="back">BACK</div>           </div>
</body>
</html>

html{font-size: 22px;
}
body{height: 100vh;display: flex;justify-content: space-evenly;align-items: center;font-family: Arial, Helvetica, sans-serif;background-image: radial-gradient( circle 506px at 50.6% 16.5%,  rgba(239,252,250,1) 5.5%, rgba(154,192,206,1) 100.2% );
}
.card-container{width: 300px;height: 400px;position: relative;perspective: 1000px;
}
.cover, .back{width: 100%;height: 100%;position: absolute;-webkit-backface-visibility: hidden;backface-visibility: hidden;transition: transform .25s ease-in-out;display: flex;justify-content: center;align-items: center;font-size: 2rem;border-radius: .4rem;box-shadow: 0 .2rem .5rem rgba(0, 0,0, .18);text-shadow: 0 .15rem .2rem rgba(0, 0, 0, .2);
}
.cover{background-color: blue;transform: rotateY(0deg);background-image: linear-gradient( 90.6deg,  rgba(59,158,255,1) -1.2%, rgba(246,135,255,1) 91.6% );color: #fff;
}
.card-container:hover .cover{transform: rotateY(180deg);
}
.back{background-color: yellow;transform: rotateY(-180deg);background-image: linear-gradient( 65.5deg,  rgba(23,205,205,1) -15.1%, rgba(23,25,95,1) 71.5% );
}
.card-container:hover .back{transform: rotateY(0deg);
}

HTML+CSS制作翻牌效果相关推荐

Unity 之制作翻牌效果
Unity 之制作翻牌效果一,卡牌效果展示二,翻牌动画制作三,翻牌动画展示一,卡牌效果展示工程图如下: PS: 1. 需要两个Shader来作为牌的正,反面的材质 2. 使用这两个 ...
CSS 制作烟雾效果文字
CSS 制作烟雾字体 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
CSS制作舞台聚光灯效果
今天依靠纯CSS来制作一个舞台聚光灯效果,先看效果图 html{font-size: 15px;}body{background-color: #222;/* 为body设置使我们的h1垂直水平居中 ...
使用CSS制作圆角效果
Web2.0中,圆角效果是很常见的,以前都是用图片来模仿,现在直接用css就能实现,例子代码如下 Html代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
html磨砂效果,使用css制作磨砂效果
要点:给需要磨砂的div(设rgba的那个元素) => 设置伪元素: 给伪元素content: ''.绝对定位,四处为0,left:0.... 给伪元素一样的背景图,并给z-index: -1 ...
html 如何制作翻牌效果,CSS3实现翻牌旋转效果
HtmlCssJs 正面背景可以透明反面背景可以透明反面内容 body,div{margin:0;padding:0;background:teal;} .flip_wrap{ display ...
纯css制作“破镜重圆”效果
纯HTML+CSS实战之制作相框效果
效果如图所示主要运用了盒子阴影,图片阴影,边框属性三个要点代码如下: <!DOCTYPE html> <html lang="en"> <head ...
如何用css实现百叶窗效果
1.效果图利用纯css实现百叶窗效果效果如下: 2.代码如下: 1.创建一个div 2.设置无序列表,插入事先准备好的图片 <!DOCTYPE html> <html lan ...

HTML+CSS制作翻牌效果

预计效果

结构分析

参考代码

HTML+CSS制作翻牌效果相关推荐

最新文章

热门文章