Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
3D perspective title
3D perspective subtitle
css
@import url(https://fonts.googleapis.com/css?family=Roboto); html, body { font-family: "Roboto", sans-serif; height: 100%; } body { transform-style: preserve-3d; transform: perspective(800px); background-color: #1F1F1F; } .wrap { position: absolute; perspective: 600px; height: 100%; width: 100%; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; text-align: center; } .card-shadow, .card { margin: 0 auto; margin-top: 100px; width: 300px; height: 450px; z-index: 1; position: absolute; border-radius: 10px; top: 0px; bottom: 0px; left: 0px; right: 0px; } .card { background: #fff url("https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?fit=crop&fm=jpg&h=950&q=80&w=1925") 50% 50%; background-size: 450%; } .card-shine { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; z-index: 1; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%); z-index: -1; } .card-shadow { top: 10px; transform-style: preserve-3d; transform: translateZ(40px); z-index: -1; background: #1f1f1f45; transform: scale(0.5, 0.5); box-shadow: 0 0 30px 10px #0e0e0e; } .card-front, .card-title, .card-subtitle { position: absolute; color: #FFF; transform-style: preserve-3d; } .card-front { border-radius: 10px; width: 100%; height: 100%; z-index: 0; background-color: rgba(0, 0, 0, 0.1); } .card-title { font-weight: 700; text-align: left; left: 30px; bottom: 140px; font-size: 35px; line-height: 30px; text-shadow: 0 5px 8px rgba(0, 0, 0, 0.65); transform: translateZ(0px); overflow: hidden; margin: 0; width: 80%; } .card-subtitle { font-weight: normal; text-align: left; left: 30px; width: 80%; bottom: 80px; font-size: 25px; line-height: 20px; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8); transform: translateZ(0px); }
JavaScript
var $card = $('.card'), $cardTitle = $('.card-title'), $cardSubtitle = $('.card-subtitle'), $cardShine = $('.card-shine'), $cardShadow = $('.card-shadow'), currentMousePos = { x: 0, y: 0 }, mouseFromCenter = { x: 0, y: 0 }; $(document).mousemove(function(event) { var wHeight= $(window).height(), wWidth= $(window).width(); currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; mouseFromCenter.x = currentMousePos.x - (wWidth / 2); mouseFromCenter.y = currentMousePos.y - (wHeight / 2); var around1 = -1 * (currentMousePos.y * 100 / wHeight * 0.2 - 10) + 'deg', around2 = 1 * (currentMousePos.x * 100 / wWidth * 0.2 - 10) + 'deg', trans1 = (currentMousePos.x * 100 / wHeight * 0.3 ) + 'px', trans2 = (currentMousePos.y * 100 / wHeight * 0.3 ) + 'px', dy = event.pageY - wHeight / 2, //@h/2 = center of poster dx = event.pageX - wWidth / 2, //@w/2 = center of poster theta = Math.atan2(dy, dx), // angle between cursor and center of poster in RAD angle = theta * 180 / Math.PI - 90, mousePositionX = ( currentMousePos.x / wWidth) * 100, mousePositionY = 50+( currentMousePos.y / wHeight)*10; // gradient angle and opacity for card shine effect $cardShine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + (currentMousePos.y / wHeight) * .7 + ') 0%,rgba(255,255,255, 0) 80%)'); // card pos and angle $card.css({ "-webkit-transform": "translate3d(" + trans1 + ", " + trans2 +", 0) scale(1) rotatex(" + around1 + ") rotatey(" + around2 + ")",'background-position': mousePositionX + '%' + ' ' + (currentMousePos.y / wHeight) * 50 + '%' }); // card shadow pos and angle $cardShadow.css({"transform": "scale(.9,.9) translateX(" + ((mouseFromCenter.x * -0.02) + 12) + "px) translateY(" + ((mouseFromCenter.y * -0.02) + 12 ) + "px) scale(1.0) rotateY(" + (mouseFromCenter.x / 25) * 0.5 + "deg) rotateX(" + ((mouseFromCenter.y / -25) ) + "deg)" }); $cardTitle.css({"transform": "translateX(" + ((mouseFromCenter.x / 25) * 0.7) + "px) translateY(" + ((mouseFromCenter.y / 25) * 1.65) + "px)" }); $cardSubtitle.css({"transform": "translateX(" + ((mouseFromCenter.x / 25) * 0.5) + "px) translateY(" + ((mouseFromCenter.y / 25) * 1.15) + "px) translateZ(60px)" }); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>3D透视卡XY-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号