觉得还挺有意思的嘻嘻~

这里有一个问题要注意一下，图片反转过程中可能会遇到一种如下所示的跳变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. promise不会被return触发， 一个promise对象中不会被Promise.reject触发

    1. let a = new Promise((resolve,reject)=>{ return 23 }) a; // promise <pending> 2. let a = ...

  2. fiddler之数据分析和查看（inspectors）-抓包

    在instpectors中主要是对请求和响应进行查看和分享,监听请求的响应内容.他有多个分页标签.界面分上下两部分,上面部分显示请求的相关信息:下面部分显示响应相关信息.简单说明常用的几个分页标签 一 ...

  3. 【Struts2】工作流程

    转发两篇文章 一个请求在Struts2框架中的处理分为以下几个步骤: 1.客户端发出一个指向servlet容器的请求(tomcat): 2.这个请求会经过图中的几个过滤器,最后会到达FilterDis ...

  4. MyEclipse中的查找快捷键

    MyEclipse中的查找快捷键 1.Ctrl+H:可以搜索文件,Java类名.方法名.包名等等. 例如:在MyEclipse中打开Search弹出框,或者在菜单中打开Search弹出框, 定位到 F ...

  5. 各种CNN模型

    Resnet: model_urls = { 'resnet18': 'https://download.pytorch.org/models/resnet18-5c106cde.pth', 'res ...

  6. java 对象 json 集合 数组 互转

    1.先定义一个类对象 package com.basics; import com.alibaba.fastjson.JSONObject; import java.util.List; import ...

  7. RPM包或源码包

    安装RPM包或源码包 点击vmware右下角光驱连接. 安装rpm包 -i:表示安装 -v:表示可视化 -h:表示显示安装进度 (同时使用) --force:表示强制安装,即使覆盖属于其他包的文件也要 ...

  8. docker配置文件不生效

    1.查看docker配置文件位置 systemctl status docker.service 2.修改docker配置文件 vim /lib/systemd/system/docker.servi ...

  9. python是强语言还是弱语言？

    python是强语言还是弱语言,没有一个具体官方的说法 数据类型也就是变量类型,一般编程语言的变量类型可以分成下面两类. 静态类型与动态类型 静态类型语言:一种在编译期间就确定数据类型的语言.大多数静 ...

  10. python中虚拟环境virtualenvwrapper的安装和使用

    虚拟环境为什么需要虚拟环境:       到目前为止,我们所有的第三方包安装都是直接通过 pip install xx 的方式进行安装的,这样安装会将那个包安装到你的系统级的 Python 环境中.但 ...