龙猫12138 2018-06-19 12:16 采纳率: 0%
浏览 636
已采纳

jquery特效，以下描述的动画应该怎么做呢？下有详细

我希望做一个动画，就像一张扑克牌一样的效果
点击“切换”按钮，正面以下图的红线为轴翻动，变到背面，然后显示出背面的东西。
请问1、这种动画叫什么动画；2、又该使用什么样的函数或者库才能做到呢？
大家麻烦的花略微指点一下就可以了，希望大家不吝赐教！
图片说明

  • 写回答

3条回答 默认 最新

  • 天际的海浪 2018-06-19 12:25
    关注
    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
#box {
    width: 150px;
    height: 250px;
    float: left;
    margin: 10px;
}
#box .front {
    transform: perspective(500px) rotateY(0deg);
    backface-visibility: hidden;
    transition: transform 1s;
    width: 100%;
    height: 100%;
    background-color: #c66;
    margin-right: -100%;
    float: left;
}
#box .backface {
    transform: perspective(500px) rotateY(180deg);
    backface-visibility: hidden;
    transition: transform 1s;
    width: 100%;
    height: 100%;
    background-color: #6CC;
}
#box.hover .front {
    transform: perspective(500px) rotateY(-180deg);
}
#box.hover .backface {
    transform: perspective(500px) rotateY(0deg);
}
</style>
</head>
<body>
<div id="box">
    <div class="front">正面</div>
    <div class="backface">背面</div>
</div>
<input type="button" value="切换" onclick="rotate();" />
<script type="text/javascript">
function rotate() {
    var obj = document.getElementById("box");
    box.className = box.className=="" ? "hover" : "";
}
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节，有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯，灯的闪烁很不稳定，经过调试发现测的距离偏大