html文字翻牌效果,css3翻牌效果
原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面
然后通过有过渡(transition)效果的改变rotate值
Dom
css
.photo-wrap {
width: 170px;
margin: 50px auto 0;
position: relative;
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d; /*让其下一级子元素拥有3D效果,背面隐藏效果。如果没有该属性子元素-webkit-backface-visibility: hidden;无效*/
transition: all 0.9s ease-in;
transform-origin: 50% 50%;
}
.photo-wrap.wrap_back {
-webkit-transform: rotateY(180deg);
}
.side-front {
position: absolute;
left: 0px;
top: 0px;
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(0deg);
}
.side-back {
position: absolute;
left: 0px;
top: 0px;
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
}
.side {
-webkit-backface-visibility: hidden;
}
js
$(function () {
var _deg = 0;
$(".photo-wrap").on("click", function () {
_deg += 180;
$(this).css("-webkit-transform", "rotateY(" + (_deg) + "deg)")
})
})
最后点击就会看到元素有正面到反面的翻转了。
----->
参考效果
css3 翻牌效果
css3之3D翻牌效果
最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...
HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
使用JS与CSS3的翻转实现3D翻牌效果
之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...
web CSS3 实现3D动态翻牌效果
使用纯CSS3 实现翻牌效果 需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...
css3 翻牌(rotate) 以及翻转 导致边缘锯齿解决 方法
主要知识点:rotate旋转以及 outline透明的像素消除(明显降低)火狐旋转是产生的 锯齿 首先看结构:
Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
Hover.css:一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
随机推荐
Android笔记: Android版本号
由于有2套版本号 总是对应不准 记下来做过标记 Android 4.3 ----18 Android 4.2---17 Android 4.1---16 Android 4.0.3---15Andro ...
window下appserv组合包配置asp标记风格与简短风格
php一共有四种编码风格 分别为 :XML风格,脚本分铬,简短风格,ASP风格 如果要配置asp标记风格与简短风格,需要在php.ini文件中配置. 打开文件的位置C:\ window\php.ini ...
SGU 390-Tickets(数位dp)
题意:有标号l-r的票,要给路人发,当给的票的编号的各数位的总和(可能一个人多张票)不小k时,才开始发给下一个人,求能发多少人. 分析:这个题挺难想的,参考了一下题解,dp[i][sum][left] ...
java中collection、map、set、list简介 (转)
Collection接口 Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).一些Collection允许相同的元 ...
实现 $.extend 的深复制和浅复制
$.extend 是jquery常用的一个方法,该方法通过传第一个布尔型参数可以指定为深复制还是浅复制,如何使用不在本文讨论. 先来理解下什么是深复制: var ob1 = {'name' : 'Ja ...
Loadrunner手动编写包含事务、检查点、关联等元素的脚本实例
一.前言: 本文适合初学者,包含很多细节,包括 二.准备: 1.以虚拟机中的Linux系统作为服务器,开启bugfree服务. 2.以fiddler作为抓包工具,辅助脚本开发. 3.脚本流程:bugf ...
MySQL 查询最近几天的记录 最近7天的记录 本周内的记录
本周内:select * from wap_content where week(created_at) = week(now) 查询一天:select * from table where to_d ...
ITEXT5.5.8转html为pdf文档解决linux不显示中文问题
在windows中支持中文,在linux中不显示中文. 解决方法:添加字体库 下载simsun.ttc字体文件,把这文件拷贝到Linux系统的 /usr/share/fonts/ 下就可以了.
win 控制台工作路径切换
1.如果是同磁盘 直接cd 列如cd C:\mysql\bin 2.如果不是同一磁盘 则要2.1 d: 操作 2.2 cd D:\Software\xampp\address\mysql\bin ps ...
python中闭包和装饰器的理解(关于python中闭包和装饰器解释最好的文章)
转载:http://python.jobbole.com/81683/ 呵呵!作为一名教python的老师,我发现学生们基本上一开始很难搞定python的装饰器,也许因为装饰器确实很难懂.搞定装饰器需 ...
html文字翻牌效果,css3翻牌效果相关推荐
- 粒子文字特效css,CSS3 粒子效果
css3粒子效果 #topcanvas{position:absolute;background:#fff;z-index:-7;width:300px;height:300px;} function ...
- 为什么html中没有折叠效果,css3折叠效果
在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图 这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用cs ...
- html3d轮播图片效果,CSS3,3D效果轮播图
---恢复内遇新是直朋能到分览支体调容开始--- 大家还的候通现端数是制这.效合应近环大过这业据记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮在重说 ...
- CSS3:CSS3 文本效果
ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...
- html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示 下载资源: 16 次 下载资源 下载积分: 20 积分 function () { ...
- html5 翻牌效果,css3实现图片翻牌特效
复制代码 代码如下: css3 翻牌 *{ margin:0; padding:0;} ul,li{ list-style:none; margin:0; padding:0;} .brandsSho ...
- HTML文字阴影火焰,CSS3文字特效属性text-shadow的介绍,实例讲解火焰文字效果
早些时候,要实现文字的阴影效果要用图片,这很不方便,但是现在,可以通过CSS3的text-shadow为字体添加阴影,给text-shadow设置相应的属性值,来实现现一些需要的字体阴影效果,减少了图 ...
- html5火焰字体效果,CSS3文字特效属性text-shadow如何实现火焰文字的效果
CSS3文字特效属性text-shadow如何实现火焰文字的效果 发布时间:2020-07-14 09:15:52 来源:亿速云 阅读:177 作者:Leah 本篇文章给大家分享的是有关CSS3文字特 ...
- html字体飞入效果并定住,css3+vue彩色文字飞入飞出动画效果
一款好看的css3+vue实现的彩色文字飞入飞出动画效果,点击文字飞出动画,然后又飞入回来,很棒的vue文字动画特效. 查看演示 下载资源: 39 次 下载资源 下载积分: 10 积分 js代码 Vu ...
最新文章
- Python : 什么是*args和**kwargs[转载]
- CodeSmith连接mysql
- mysql清理连接数缓存,MySQL连接池、线程缓存、线程池的区别
- 公路多孔箱涵设计_【公路常识中篇】公路路基边坡滑坡防护设计和预防
- linux11g导入10g 怎么改版本,Oracle 11g导入到10g引起的错误
- oracle不停机迁移数据库,Oracle 12.2 使用datagurd技术极短停机时间内快速迁移数据库方案步骤...
- Leetcode431.将N叉树编码为二叉树(golang)
- 最新电视直播PHP源码V1.2
- c语言交通灯程序闪烁,单片机交通灯闪烁程序
- PostgreSQL安装及关联ArcMap
- 计算机毕业设计springboot+vue餐厅点餐系统源码
- tomcat 热部署的实现
- 如今表情包的天下,曾经可是颜文字和Emoji的啊...
- 计算机表格排版,你必须要知道的excel排版技巧
- Multifactor Explanations of Asset Pricing Anomalies学术翻译
- HOW TO LEECH USING IRC
- 音视频基础知识---音频编码格式
- Windows8内核模式下开发NDIS应用 NDIS Filter讲解
- 网络编程——epoll
- Vue项目自动部署之一、阿里云Linux服务器、域名购买和使用