[英]Create 3d image hover effect
I want to create this effect but with javascript not in pure css as he did.我想创建这种效果,但 javascript 不像他那样在纯 css 中。 And no scss also just css It'll be good.
而且没有scss也只有css就好了。 codepen
密码笔
.picture-container { display: flex; flex-flow: row nowrap; justify-content: center; justify-self: center; align-items: center; width: 40%; height: 100vh; } .picture-frame { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 5%; border: solid 1px #000; } .picture { z-index: 1; width: 100%; height: 100%; }
<html> <div class="picture-container first-picture horizontal-small"> <div class="picture-frame"> <img id="secondPic" src="https://picsum.photos/200/300" alt="picture of a brick house" class="picture middle-right" /> </div> </div> <html>
I'm also using Vuejs if it changes something for this如果它为此改变了一些东西,我也在使用 Vuejs
You can use transform styling to get the 3D effect.您可以使用变换样式来获得 3D 效果。 Checkout my code below
在下面查看我的代码
var card = document.getElementsByClassName('card'); document.addEventListener("mousemove", function(e) { var ax = -(window.innerWidth/2- e.pageX)/20; var ay = (window.innerHeight/2- e.pageY)/10; document.getElementById("cards").style.transform = "rotateY("+ax+"deg) rotateX("+ay+"deg)"; });
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700); body { background: #edf2f4; perspective: 1000px; transform-style: preserve-3d; display: flex; height: 100vh; font-family: "Playfair Display", georgia, serif; } .card { pointer-events: none; transform: translateZ(0); padding: 30px; background: white; border-radius: 5px; width: 400px; height: 200px; margin: auto; transform-style: preserve-3d; backface-visibility: hidden; display: flex; box-shadow: 0 0 5px rgba(0, 0, 0, .1); position: relative; } .card:after { content: " "; position: absolute; width: 100%; height: 10px; border-radius: 50%; left: 0; bottom: -50px; box-shadow: 0 30px 20px rgba(0, 0, 0, .3); } .card .card-content { margin: auto; text-align: center; transform-style: preserve-3d; } .card h1 { transform: translateZ(100px); }
<div id="cards" class="card"> <div class="card-content"> <h1>Just hover around</h1> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.