CSS3习题2（卡牌旋转）

Posted 2021-04-09 书软

这一节我们说第二道练习题，让一张卡牌，通过3D旋转，从背面旋转到正面来。这个例子常见于一些抽奖的功能，例如给你准备几张翻过去的卡牌，让你点其中一张，然后旋转以后卡牌翻过来，看是否自己能够中奖。当然，这只是其中一个例子，还会有其他开发中现实中的例子。

其实你觉得是点击了卡牌背面，然后旋转后出现了正面，其实需要准备两张图片，分别是背面图片和正面图片。并非真正的一张图片。

两张图片：

这一节我们主要用到的是一个属性：

transform：rotateY(90deg)

之前大家已经学习过相关知识点，rotateY 是横向旋转，后面跟的是旋转的角度。如果单纯加这个属性，元素会速度很快的旋转过去，看不到效果。所以，我们的习题如果要看到旋转效果，需要添加 js 代码，使其有个旋转的过程。

js 代码现在还不是重点，所以我把代码拷贝出来，大家自己试着调试一下看效果：

HTML部分：

               <div>

<img id="rotateImg" onClick="rotateImg()"/>

<img src="img/paiz.png" id="rotateImg1" style="transform:rotateY(90deg)"/>

</div>

JS部分：

<script type="text/javascript">

function rotateImg(){

var rImg = document.getElementById("rotateImg");

var rIndex = 0;

var rIndex1 = 90;

var sinterval = setInterval(function(){

rImg.style.transform = "rotateY("+rIndex+"deg)";

rIndex++;

if(rIndex == 90){

window.clearInterval(sinterval);

var rImg1 = document.getElementById("rotateImg1");

rImg1.style.display = "block";

rImg.style.display = "none";

var sinterval1 = setInterval(function(){

rImg1.style.transform = "rotateY("+rIndex1+"deg)";

rIndex1++;

if(rIndex1 == 180){

window.clearInterval(sinterval1);

}

}, 10); 

}

}, 10);

}

</script>

-------------------------------------------------------------------

我稍微解释一下这段代码：

这里主要用到了 setInterval  意思是多久执行一次操作，代码中定义了 rIndex 变量，初始化为0  ，我们希望每10毫秒 rIndex 加一，没加一次把这个变量的值放到 旋转的角度数上，这样就达到了每10毫秒，我们的卡牌进行3D旋转1deg 。deg 还有不知道什么意思的吗，自己把代码考下去试一试，改一改就知道了。

这段时间主要学习的还是CSS3内容的旋转，所以提前预习一下 js 内容也好。css3内容还有2节课，后续我们就要开始写 js 的文章，这才是重中之重。