觉得还挺有意思的嘻嘻~

这里有一个问题要注意一下，图片反转过程中可能会遇到一种如下所示的跳变bug：

这玩意一出来吓我一大跳，显然这种用户体验是很不好的，解决方法：

在.pic, .info{...}这个样式中添加 transform:perspective(800px) rotateY(0deg) 这句话就好啦！要给他一个初始的位置，这样他就不会乱飞啦~

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片翻面</title>

    <style type="text/css">

        .con{

            width:249px;

            height:299px;

            margin:100px auto 0;

            position:relative;

            transform-style: preserve-3d;

        }

        .pic, .info{

            width:249px;

            height:299px;

            position:absolute;

            left:0;

            top:0;

            /*隐藏背面图片*/

            backface-visibility: hidden;

            transition: all 1s ease;

            /*防止跳变bug*/

            transform:perspective(800px) rotateY(0deg) ;

        }

        .info{

            width:249px;

            height:299px;

            background-color: rgb(80,143,22);

            text-align: center;

            line-height: 299px;

            transform: translateZ(2px) rotateY(180deg);

        }

        .con:hover .pic{

            transform: perspective(800px) rotateY(180deg);

        }

        .con:hover .info{

            transform: perspective(800px) rotateY(0deg);

        }

    </style>

</head>

<body>

    <div class="con">

        <div class="pic"><img src="data:images/login.jpg" alt="小鸭子"></div>

        <div class="info">图片文字说明</div>

    </div>

</body>

</html>

效果图：

CSS3——制作图片翻页的小动画的更多相关文章

  1. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  2. Vue 左右翻页，点赞动画

    因做小活动比较多,使用了一些动画,做些笔记,供大家参考 翻页动画 router -> index.js import Vue from 'vue'; import Router from 'vu ...

  3. android viewpager 图片翻页例子

    使用ViewPager这个类可以轻松实现多个页面的滑动功能 viewpager默认在工具界面上是找不到的,需求添加android-support-v4.jar包: 如果没有找到,需要打开Android ...

  4. jq小demo—图片翻页展示效果 animate()动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. jq demo—图片翻页展示效果 animate()动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 微信小程序中实现左右滑动图片翻页

    页面代码 <swiper class="container" indicator-dots="{{indicatordots}}" autoplay=&q ...

  7. HTML5+CSS3实现图片可倾斜摆放的动画相册效果

    先看看效果:其中鼠标悬浮在图片上会有动态效果图 直接上代码: css文件 @CHARSET "UTF-8"; *{ padding:0px; margin:0px; } div{ ...

  8. vue-router自动判断左右翻页转场动画

    前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作 ...

  9. 个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

随机推荐

  1. robotframework之使用cookies登陆

    有的系统是使用cookies保持登陆的,而RF的Request库里面没有像Selenium2Library里面一样操作cookies的关键字,若接口需要登录则只能用UI自动化先登录,然后再将cooki ...

  2. 【MM系列】SAP 的账期分析和操作

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 的账期分析和操作   前言部 ...

  3. 20191110 Spring Boot官方文档学习（4.2）

    4.2.外部化配置 Spring Boot使您可以外部化配置,以便可以在不同环境中使用相同的应用程序代码.您可以使用Properties文件,YAML文件,环境变量和命令行参数来外部化配置.属性值可以 ...

  4. Js AJAX Event

    ;(function () { if ( typeof window.CustomEvent === "function" ) return false; function Cus ...

  5. [DS+Algo] 004 栈、队列及其代码实现

    1. Stack FILO (FirstInLastOut) 的链表结构 在程序编译环境上使用较多 常用操作 push pop peek is_empty size Python 代码示例 class ...

  6. [Web 前端] 032 vue 初识

    目录 0. 先下载 1. 先写个轮廓 2. 牛刀小试 2.1 例子 1 2.2 例子 2 3. 模板语法 上例子 4. 文本指令 上例子 5. 属性操作 上例子 6. 样式操作 上例子 类名的操作 s ...

  7. 万万没想到，Spring Boot 竟然这么耗内存！

    Spring Boot总体来说,搭建还是比较容易的,特别是Spring Cloud全家桶,简称亲民微服务. 但在发展趋势中,容器化技术已经成熟,面对巨耗内存的Spring Boot,小公司表示用不起. ...

  8. windows上Appium安装和使用

    1.Appium安装相关依赖工具: Android Studio或者Android SDK:https://developer.android.com/studio/Appium Desktop: h ...

  9. HDUSTOJ-1559 Vive la Difference!(简单题)

    1559: Vive la Difference! 时间限制: 3 Sec  内存限制: 128 MB提交: 18  解决: 14[提交][状态][讨论版] 题目描述 Take any four po ...

  10. SpringMVC源码解析

    一:springmvc运行过程: 1. dispatcherServlet 通过 HandlerMapping 找到controller2. controller经过后台逻辑处理得到结果集modela ...