预计效果
但鼠标移动到相应的卡牌的时候,卡牌会自动翻转过去;当鼠标移走时,卡牌会自动盖上
结构分析
-
正面和背面分别用两个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