帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» CSS3 3D图片翻转特效
CSS3 3D图片翻转特效
浏览:567次
-
评论:0次
-
发布时间:2017-03-11
Html
Css
Js
Mouse
Irrigation rats
Rabbit
body { background-color:#EFEFEF } div.flip-3d { perspective:1200px; width:30%; float:left; } div.flip-3d figure { position:relative; transform-style:preserve-3d; transition:1s transform; font-size:1.6rem; } div.flip-3d figure img { width:100%; height:auto; } div.flip-3d figure figcaption { position:absolute; width:100%; height:100%; top:0; transform:rotateY(.5turn) translateZ(1px); background:rgba(255,255,255,0.9); text-align:center; padding-top:45%; opacity:0.6; transition:1s .5s opacity; } div.flip-3d:hover figure { transform:rotateY(.5turn); } div.flip-3d:hover figure figcaption { opacity:1; } div.flip-3d figure:after { content:" "; display:block; height:8vw; width:100%; transform:rotateX(90deg); background-image:radial-gradient(ellipse closest-side,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); } @media screen and (max-width:800px) { div#flip-3d { perspective-origin:center top; } div#flip-3d figure { float:none; width:50%; margin:0 auto; margin-bottom:12vw; } div.flip-3d figure figcaption { font-size:0.8rem; } div#flip-3d figure:last-child { display:none; } }
// StyleFix 1.0.1 & PrefixFree 1.0.4 / by Lea Verou / MIT license (function() { function f(a, b) { return [].slice.call((b || document).querySelectorAll(a)) } if (window.addEventListener) { var b = window.StyleFix = { link: function(a) { try { if (!/\bstylesheet\b/i.test(a.rel) || !a.sheet.cssRules) return } catch(c) { return } var d = a.href || a.getAttribute("data-href"), g = d.replace(/[^\/]+$/, ""), e = a.parentNode, h = new XMLHttpRequest; h.open("GET", d); h.onreadystatechange = function() { if (h.readyState === 4) { var c = h.responseText; if (c && a.parentNode) { c = b.fix(c, true, a); g && (c = c.replace(/url\((?:'|")?(.+?)(?:'|")?\)/gi, function(a, c) { return ! /^([a-z]{3,10}:|\/)/i.test(c) ? 'url("' + g + c + '")': a }), c = c.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)" + g, "gi"), "$1")); var d = document.createElement("style"); d.textContent = c; d.media = a.media; d.disabled = a.disabled; d.setAttribute("data-href", a.getAttribute("href")); e.insertBefore(d, a); e.removeChild(a) } } }; h.send(null); a.setAttribute("data-inprogress", "") }, styleElement: function(a) { var c = a.disabled; a.textContent = b.fix(a.textContent, true, a); a.disabled = c }, styleAttribute: function(a) { var c = a.getAttribute("style"), c = b.fix(c, false, a); a.setAttribute("style", c) }, process: function() { f('link[rel~="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link); f("style").forEach(StyleFix.styleElement); f("[style]").forEach(StyleFix.styleAttribute) }, register: function(a, c) { (b.fixers = b.fixers || []).splice(c === void 0 ? b.fixers.length: c, 0, a) }, fix: function(a, c) { for (var d = 0; d < b.fixers.length; d++) a = b.fixers[d](a, c) || a; return a }, camelCase: function(a) { return a.replace(/-([a-z])/g, function(a, b) { return b.toUpperCase() }).replace("-", "") }, deCamelCase: function(a) { return a.replace(/[A-Z]/g, function(a) { return "-" + a.toLowerCase() }) } }; (function() { setTimeout(function() { f('link[rel~="stylesheet"]').forEach(StyleFix.link) }, 10); document.addEventListener("DOMContentLoaded", StyleFix.process, false) })() } })(); (function(f) { if (window.StyleFix && window.getComputedStyle) { var b = window.PrefixFree = { prefixCSS: function(a, c) { function d(c, d, g, e) { c = b[c]; c.length && (c = RegExp(d + "(" + c.join("|") + ")" + g, "gi"), a = a.replace(c, e)) } var g = b.prefix; d("functions", "(\\s|:)", "\\s*\\(", "$1" + g + "$2("); d("keywords", "(\\s|:)", "(\\s|;|\\}||$)", "$1" + g + "$2$3"); d("properties", "(^|\\{|\\s|;)", "\\s*:", "$1" + g + "$2:"); if (b.properties.length) { var e = RegExp("\\b(" + b.properties.join("|") + ")(?!:)", "gi"); d("valueProperties", "\\b", ":(.+?);", function(a) { return a.replace(e, g + "$1") }) } c && (d("selectors", "", "\\b", b.prefixSelector), d("atrules", "@", "\\b", "@" + g + "$1")); return a = a.replace(RegExp("-" + g, "g"), "-") }, prefixSelector: function(a) { return a.replace(/^:{1,2}/, function(a) { return a + b.prefix }) }, prefixProperty: function(a, c) { var d = b.prefix + a; return c ? StyleFix.camelCase(d) : d } }; (function() { var a = {}, c = "", d = 0, g = [], e = getComputedStyle(document.documentElement, null), h = document.createElement("div").style, j = function(b) { g.indexOf(b) === -1 && g.push(b); if (b.indexOf("-") > -1) { var e = b.split("-"); if (b.charAt(0) === "-") { var b = e[1], f = ++a[b] || 1; a[b] = f; for (d < f && (c = b, d = f); e.length > 3;) e.pop(), f = e.join("-"), StyleFix.camelCase(f) in h && (b = g, b.indexOf(f) === -1 && b.push(f)) } } }; if (e.length > 0) for (var i = 0; i < e.length; i++) j(e[i]); else for (var f in e) j(StyleFix.deCamelCase(f)); b.prefix = "-" + c + "-"; b.Prefix = StyleFix.camelCase(b.prefix); g.sort(); b.properties = []; for (i = 0; i < g.length; i++) { f = g[i]; if (f.charAt(0) !== "-") break; f.indexOf(b.prefix) === 0 && (e = f.slice(b.prefix.length), StyleFix.camelCase(e) in h || b.properties.push(e)) } b.Prefix == "Ms" && !("transform" in h) && !("MsTransform" in h) && "msTransform" in h && b.properties.push("transform", "transform-origin"); b.properties.sort() })(); (function() { function a(a, b) { g[b] = ""; g[b] = a; return !! g[b] } var c = { "linear-gradient": { property: "backgroundImage", params: "red, teal" }, calc: { property: "width", params: "1px + 5%" }, element: { property: "backgroundImage", params: "#foo" } }, d = { initial: "color", "zoom-in": "cursor", "zoom-out": "cursor", box: "display", flexbox: "display", "inline-flexbox": "display" }; c["repeating-linear-gradient"] = c["repeating-radial-gradient"] = c["radial-gradient"] = c["linear-gradient"]; b.functions = []; b.keywords = []; var g = document.createElement("div").style, e; for (e in c) { var h = c[e], f = h.property, h = e + "(" + h.params + ")"; ! a(h, f) && a(b.prefix + h, f) && b.functions.push(e) } for (var i in d) f = d[i], !a(i, f) && a(b.prefix + i, f) && b.keywords.push(i) })(); (function() { function a(a) { g.textContent = a + "{}"; return !! g.sheet.cssRules.length } var c = { ":read-only": null, ":read-write": null, ":any-link": null, "::selection": null }, d = { keyframes: "name", viewport: null, document: 'regexp(".")' }; b.selectors = []; b.atrules = []; var g = f.appendChild(document.createElement("style")), e; for (e in c) { var h = e + (c[e] ? "(" + c[e] + ")": ""); ! a(h) && a(b.prefixSelector(h)) && b.selectors.push(e) } for (var j in d) h = j + " " + (d[j] || ""), !a("@" + h) && a("@" + b.prefix + h) && b.atrules.push(j); f.removeChild(g) })(); b.valueProperties = ["transition", "transition-property"]; f.className += " " + b.prefix; StyleFix.register(b.prefixCSS) } })(document.documentElement);
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>CSS3 3D图片翻转特效-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:CSS3 3D图片翻转特效
CSS3好看实用选择框
jQuery垂直折叠效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
567
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值