[{"data":1,"prerenderedAt":69},["Reactive",2],{"gvhCS2QDzU":3,"_apollo:default":68},{"inspiration":4},{"id":5,"inspirationId":6,"commentCount":7,"date":8,"modified":9,"acf_inspiration":10,"__typename":67},"cG9zdDoxMzA1",1305,null,"2023-03-20T10:00:03","2023-03-21 08:24:31",{"defaultColor":11,"accentColor":12,"tags":13,"technicalLevel":14,"layouts":15,"__typename":66},"#eedeef","#a472a6","CSS","lvl10",[16,23,30,41,49,57,61],{"desc":17,"title":18,"url":7,"image":19,"__typename":22},"Let me show you how to quickly create a \"3D\" effect when hovering over a card in CSS. When your cursor in any of the 4 corners the card will look as if pressed in on that side of the card.","Pushing Corners - 3D effect in CSS",{"mediaItemUrl":20,"__typename":21},"https://jalokim.graphics/api/wp-content/uploads/2023/03/adsadasdsadasda.jpg","MediaItem","Inspiration_AcfInspiration_Layouts_HeaderBanner5050",{"title":24,"desc":25,"image":26,"__typename":29},"What we'll be building today","As seen on the video, I'd like to show you how to make this 3D effect on hover of a card. This can be achieved in a couple of ways, but I'll show you what I consider the easiest way to tackle this. I will use mostly css, the bulk of the work will be here while javascript will be just for changing a className to trigger the effect.",{"mediaItemUrl":27,"mimeType":28,"__typename":21},"https://jalokim.graphics/api/wp-content/uploads/2023/03/Screen-Recording-2023-03-20-at-10.55.41.mp4","video/mp4","Inspiration_AcfInspiration_Layouts_PosterPreviewer",{"desc":31,"title":32,"order":33,"images":34,"__typename":40},"To achieve this effect we must know the basics of css, specifically the transform property that allows to create vector effects with our html elements.\u003Cbr>\r\nAmongst other properties we'll find \u003Cb>Perspective\u003C/b> and \u003Cb>Rotate X & Y\u003C/b>\u003Cbr>\u003Cbr>\r\nPerspective will allow distorting the element and using rotateX and rotateY changes the x and y axis creating the pushed in 3D effect. Increasing the degree in the rotate setting will increase the depth of the effect.","#1 The Basics - CSS","normal",[35],{"image":36,"__typename":39},{"mediaItemUrl":37,"mimeType":38,"__typename":21},"https://jalokim.graphics/api/wp-content/uploads/2023/03/carbon-9.jpg","image/jpeg","Inspiration_AcfInspiration_Layouts_FourBlock_images","Inspiration_AcfInspiration_Layouts_FourBlock",{"desc":42,"title":43,"order":44,"images":45,"__typename":40},"Since we now know how to push down one of the corners, we might be encouraged to apply this effect for every point on our card. yes, that would make a realistic effect, making the card move exactly where the cursor is, but at the same time do you need to be that precise? This isn't a core feature, save performance for something more important.\u003Cbr>\r\n\u003Cbr>\r\nYou can get away with a compelling effect by just making 4 hoverable areas: [top-left, top-right, bottom-left and bottom-right]. Hovering anywhere on one of these 4 triggers will trigger the animation. I add 4 spans into the div and position them absolutely in each corner. \u003Cb>Remember to set the card to position:relative\u003C/b>\u003Cbr>\u003Cbr>\r\nSeen here is tailwind.css, if you haven't yet witnessed its power please do so!","#2 Tricking the system","reversed",[46],{"image":47,"__typename":39},{"mediaItemUrl":48,"mimeType":38,"__typename":21},"https://jalokim.graphics/api/wp-content/uploads/2023/03/carbon-9ss.jpg",{"desc":50,"title":51,"order":33,"images":52,"__typename":40},"All that's left to do is when you hover on the each respective span it should change the parents div, rotateX and rotateY values to push the corner. It's 2023 and we still can't select parents in css, so we'll need a simple js function that will switch the classes when we hover on a specific trigger.\r\n\u003Cbr>\u003Cbr>\r\nIn the example I'm using vue.js but the key concept can be used in any framework (vanilla included).\r\nWhen you hover on any of the spans it should trigger a function that changes the rotateX and Y values. I opted for changing this via the \"style\" attribute, but you can also have 4 dedicated classes and rotate between them.\r\n\u003Cbr>\u003Cbr>\r\nFinally, you will want to animate this effect for it to actually look nice. To do so implement \u003Cb>transition\u003C/b> in the css class for the parent box.","#3 Where Javascript needs to help us",[53],{"image":54,"__typename":39},{"mediaItemUrl":55,"mimeType":56,"__typename":21},"https://jalokim.graphics/api/wp-content/uploads/2023/03/carbon-13.png","image/png",{"desc":58,"title":59,"order":33,"__typename":60},"Some key things to keep in mind. \u003Cbr>\r\nSince the invisible spans are absolutely placed above your card content it means you wont be able to interact or select text in your card. A link, for example, can be placed outside the card instead of in it. So this effect is rather for images or elements that don't need interaction.\u003Cbr>\u003Cbr>\r\nThe transform properties are relative to their size. That means that a 1 degree change on a small card will be minute, while the same 1 degree rotation on a large card will be very pronounced. Tweak the degrees depending on the size of your elements. \u003Cbr>\u003Cbr>\r\nIf you are planning to use this on a large scale (like a gallery) think about performance and removing event listeners \u003Cbr>\u003Cbr> Is a fully css version possible? Most probably but I think there would be a lot of DOM elements at play, so I assume using js to toggle a class is a lot easier to use and read in the future.","Known issues & Final Notes","Inspiration_AcfInspiration_Layouts_QuoteBox",{"code":62,"description":63,"title":64,"fieldGroupName":65,"__typename":65},"\u003Cdiv class=\"card\">\r\n    \u003Cdiv class=\"card-overlay\">\r\n        \u003Cspan\r\n            class=\"overlay-segment top-0 left-0\"\r\n            @mouseenter=\"pushCorner('top-left')\"\r\n        />\r\n        \u003Cspan\r\n            class=\"overlay-segment top-0 right-0\"\r\n            @mouseenter=\"pushCorner('top-right')\"\r\n        />\r\n        \u003Cspan\r\n            class=\"overlay-segment bottom-0 left-0\"\r\n            @mouseenter=\"pushCorner('bottom-left')\"\r\n        />\r\n        \u003Cspan\r\n            class=\"overlay-segment bottom-0 right-0\"\r\n            @mouseenter=\"pushCorner('bottom-right')\"\r\n        />\r\n    \u003C/div>\r\n    \u003C!-- Your content here -->\r\n\u003C/div>\r\n\u003Cstyle>\r\n.card {\r\n    overflow: hidden;\r\n    position: relative;\r\n    padding: 20px;\r\n    background: white;\r\n    border-radius: 20px;\r\n    width: 200px;\r\n    height: 200px;\r\n}\r\n.card.push-top-left {\r\n    transform: perspective(200px) rotateY(-1deg) rotateX(1deg);\r\n}\r\n.card-overlay {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    margin: auto;\r\n    z-index: 10\r\n}\r\n.overlay-segment {\r\n    position: absolute;\r\n    width: 50%;\r\n    height: 50%;\r\n}\r\n\u003C/style>","","Copy the Code","Inspiration_AcfInspiration_Layouts_CodeBlock","Inspiration_AcfInspiration","Inspiration",{},1713287143402]