动画翻转效果

最新推荐文章于 2024-02-19 08:56:23 发布
最新推荐文章于 2024-02-19 08:56:23 发布
阅读量226 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leiyanhongfhc/article/details/77435831
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>翻转效果</title>


 <script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/center.css">
</head>
<body>
<!-- 内容开始 -->
<div class="content">
    <!-- 翻转div -->
    <div class="late">
        <!-- 正面 -->
        <div class="front">
            <p>你</p>
        </div>
        <!-- 反面 --><!-- background-size设置背景图的大小  值为contain时 同比例缩放图片大小 -->
        <div class="back" style="background:url(img/bg2.gif) no-repeat;background-size:300px 400px;">
            <p>背面</p>
        </div>
    </div>
    <!-- 同翻转div -->
    <div class="late">
        <div class="front">
            <p>是</p>
        </div>
        <div class="back" style="background:url(img/bg3.gif) no-repeat;background-size:300px 400px;">
            <p>背面</p>
        </div>
    </div>
    <div class="late">
        <div class="front">
            <p>傻</p>
        </div>
        <div class="back" style="background:url(img/bg4.gif) no-repeat;background-size:300px 400px;">
            <p>背面</p>
        </div>
    </div>
    <div class="late">
        <div class="front">
            <p>子</p>
        </div>
        <div class="back" style="background:url(img/bg1.gif) no-repeat;background-size:300px 400px;">
            <p>背面</p>
        </div>
    </div>
    <div class="late">
        <div class="front">
            <p>吗？</p>
        </div>
        <div class="back" style="background:url(img/bg2.gif) no-repeat;background-size:300px 400px;">
            <p>背面</p>
        </div>
    </div>
  
<script type="text/javascript">
  $(function(){
      $(".late").hover(function(){
         $(this).css({"transform":"rotateY(180deg)","transition":"0.6s"});//沿着Y轴旋转180度,动画时间
         //获取当前索引值，当前是哪个div
         var num=$(this).index();
         //将背面翻转过显示，将正面隐藏
         $(".back").eq(num).css({"transform":"rotateY(180deg)","display":"inline-block"});
         $(".front").eq(num).hide()
      },function(){
         $(this).css("transform","rotateY(0deg)");
         //获取当前索引值，当前是哪个div
         var num=$(this).index();
         //将背面翻转过显示，将正面隐藏
         $(".front").eq(num).css({"transform":"rotateY(360deg)","display":"inline-block"});
         $(".back").eq(num).hide()
      })
   })




</script>
</body>
</html>
leiyanhongfhc
关注
微信小程序 - 签到打卡旋转 3D 动画功能，仿钉钉打卡签到时 “容器“ 动画翻转效果（超详细完整示例源码教程，代码简洁、丝滑流畅、示例复制即用）
王佳斌
06-18 3897
微信小程序上班打卡签到旋转动画，微信小程序硬币翻转功能效果，微信小程序如何实现类似钉钉打卡签到的动画效果，微信小程序仿钉钉打卡考勤按钮动画，微信小程序实现点击卡片翻转效果详细教程，微信小程序怎么做点击卡片翻转效果，实现容器卡片翻转动画效果，类似考勤打卡签到时翻转效果，微信小程序卡片翻转动画，实现图片翻转效果的实例代码，微信小程序如何实现打卡功能，微信小程序翻转动画3d翻开卡片效果，微信小程序的图片旋转动画代码， 微信小程序仿造钉钉签到动画，微信小程序签到打卡考勤的动画怎么实现，旋转翻转容器动画效果教程源码，
微信小程序 - 实现容器卡片翻转动画效果，类似考勤打卡签到时翻转效果（像翻牌抽奖类似的效果动画）详细示例源码教程，一键复制开箱即用！
高级前端工程师
05-16 6731
微信小程序容器翻转效果css，微信小程序实现点击卡片翻转效果详细教程，微信小程序卡片翻转动画示例源码，微信小程序类似钉钉打卡翻转动画，微信小程序实现图片翻转效果的实例代码，微信小程序实现打卡签到页面，微信小程序打卡动画怎么做。微信小程序实现翻牌抽奖动画，微信小程序如何实现卡片内容翻转切换动画，微信小程序翻转动画，微信小程序 Animation实现图片翻转旋转动画示例，微信小程序仿钉钉打卡签到动画功能，微信小程序点击翻转到背面效果，微信小程序实现翻效果，微信小程序:图片翻转特效，微信小程序实现打卡(翻转效果)
原生js实现卡片式挂历日历翻转特效动画.zip
07-11
原生js实现卡片式挂历日历翻转特效动画。备注：点击日历往前翻阅日历。
动画翻转
李光正的专栏
04-26 892
//箭头翻转动画   animation = new RotateAnimation(0, -180,RotateAnimation.RELATIVE_TO_SELF, 0.5f,RotateAnimation.RELATIVE_TO_SELF, 0.5f);   animation.setInterpolator(new LinearInterpolator());   animation
翻转动画效果
qq_39152317的博客
07-31 233
一、实现一个简单的翻转动画 1、XML文件 xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="matc
CSS3新特性之animation动画、3D转换(含两面翻转的盒子案例、swiper插件)、浏览器私有前缀
最新发布
Bulut0907
02-19 2229
近大远小物体后面遮挡不可见x轴：水平向右。注意： x右边是正值，左边是负值y轴：垂直向下。注意： y下面是正值，上面是负值z轴：垂直屏幕。注意： 往外面是正值，往里面是负值。
安卓动画效果相关-android-flip切换界面的翻转动画效果.rar
07-29
`ViewFlipper`是一个布局管理器，它可以自动在多个子视图之间进行切换，并提供了多种内置的过渡动画，包括翻转效果。然而，为了实现更为复杂的翻转动画，开发者可能需要使用`ObjectAnimator`或`Animation`类来定制...
纯CSS实现菜单、导航栏的3D翻转动画效果
09-25
标签“CSS 3D翻转效果 动画”强调了本次讨论的重点，即利用CSS3的3D变换来实现翻转效果，并且这种效果是动态的，具有动画性质。 部分内容展示了实现3D翻转菜单的具体HTML和CSS代码。HTML部分主要由一个无序列表（`...
android动画翻转,Android动画之3D翻转效果实现函数分析
weixin_28703489的博客
05-25 453
Android中的翻转动画效果的实现，首先看一下运行效果如上图所示.Android中并没有提供直接做3D翻转的动画，所以关于3D翻转的动画效果需要我们自己实现，那么我们首先来分析一下Animation 和 Transformation。Animation动画的主要接口，其中主要定义了动画的一些属性比如开始时间，持续时间，是否重复播放等等。而Transformation中则包含一个矩阵和alpha值...
数字翻转效果 类似翻日历
06-03
数字翻转效果,类似翻日历,数字1234567依次翻转，简单动画效果
翻转效果（ActionScript）
02-25
很炫的效果，翻转图片，你会有小小收获的，有助于你的学习
皇上翻牌3D图片翻转动画效果.zip
05-25
皇上翻牌3D图片翻转动画效果，纯CSS3代码，鼠标经过图片，3D卡通图片翻转效果。
jquery 翻书效果 翻日历效果免费下载
09-21
jquery 翻书效果 翻日历效果免费下载
动画旋转
weixin_44552898的博客
05-27 660
作者：李坤凤 本次任务完成时间：2019年5月23日 开发工具与关键技术：开发工具：VS 关键技术:动画旋转 一、动画前效果图 二、动画后效果图 RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。 ScaleTransform：能够让某对象产生缩放变化。 TransformGroup：能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。 &...
iOS仿微信相册界面翻转过渡动画
Minecraft
08-28 2666
仿微信相册界面的从图片界面到评论界面的翻转过渡动画效果
前端|3D立体视频翻转动画
算法与编程之美
07-23 1667
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！基本介绍HTM...
前端实现图片快速反转替换_CSS3实现翻转卡牌效果
weixin_42515372的博客
01-30 877
今天在工作中遇到需求，需要用CSS3写一个卡片翻转效果，这个效果看起来简单，但是还是涉及到一些不常用的CSS3中的3D转换的属性以及实现该效果的思路，所以这里总结一下。需要的CSS3属性perspective目前浏览器都不支持perspective属性在chrome和Safari中需要使用-webkit-perspective，而在Firefox中需要使用-moz-perspective来定义。定...
html css动画自动旋转,使用CSS3 backface-visibility属性制作翻转动画效果
weixin_36205101的博客
05-30 751
使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果。当你翻转一个元素的时候，你看到的是什么？通常情况下，我们应该看到的是元素的背面，这是正常的情况，但是有时候我们希望翻转一个元素后看到的是另一个元素。通过backface-visibility:hidden;属性，我们可以使一个元素在翻转之后消失，这是可以使用另一个元素放在它的背面，从而制作出一种元素翻转之后出...
CSS3实现3D色子翻转动画效果
这样，通过CSS3的`transition`或`animation`，我们可以控制色子的翻转速度、方向和时间，从而创造出逼真的3D翻转效果。 总结来说，这个3D色子翻转特效的核心在于理解并巧妙运用CSS3的3D转换属性，包括`perspective`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值