Create a 3D overlay effect to allow website visitors to inspect content such as pictures
Build a 3D box inspector
- Initiate page
The first step is to define the web page as a HTML
document. The initial element tells the browser to
treat the content as HTML5. The second HTML tag
element represents the page document. This element
stores the head section used to include the external
CSS and Javascript resources, along with the body
section. Visible content is placed inside the body.
<!DOCTYPE html>
<html>
<head>
<title>3D Box Viewer</title>
<link rel='stylesheet' type='text/css'
href='styles.css' />
<script src='code.js' type='text/
javascript'></script>
</head>
<body>
*** STEP 2 HERE
</body>
</html>- Body content
The page’s body content consists of a container
element used to store the box, indicated with the
application of the associated class name. The box
has four children — each being an empty div
element to be used by the CSS to create the visible
sides of the 3D box.
<divclass='container'>
<divclass='box'>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>- CSS: container
Create a new file called 'styles.css'. This step defines
the how the container is presented to match the full
browser window. A background image is set to
display through the visible area of the box, while the
perspective sets the size for the 3D position settings
defined in upcoming steps.
.container {
width:100vw;
height:100vh;
margin:0;
perspective: 400px;background: url(image.jpg);
background-size: cover;
}4. Box settings
The box element acts as a container to control each
of the box’s side panels so that they don’t need to
be calculated individually. This step applies the
transformation settings to treat the box with 3D
position calculations. The default transform is set
with translate settings to position the box in the
required x,y,z co—ordinates..box {
position: absolute;
transform-style: preserve-3d;
transform: translateZ(26vw)
translateX(42vw) translateY(25vh);
}5. Box panels
Each child of the box is presented with a set of
shared settings – primarily sharing the same size,
border and colour. As the box panels are dependent
on ability to be placed at specific locations, absolute
positioning is applied in order for the panels to be
placed using pixel co—ordinates..box > *{
position: absolute;
box-sizing: border-box;
width:200px;
height: 200px;
border: 5px solidblack;
background: linear-gradient(grey,white);
}6. Panel position
With the panels now set with visible styling, the last
step is to apply their unique 3D placement settings.
Each child of the box is used as a vertical or
horizontal side panel, hence the use of transform to
apply 3D rotation a z co—ordinate positioning. Each
element is referenced using their index positioning
via the nth—child selector./*right panel*/
.box > *:nth-child(1){
transform: rotateY( 90deg)
translateZ(100px);
}/*left panel*/.box> *:nth-child(2){
transform: rotateY( -90deg)
translateZ(100px);
}/*top panel*/
.box> *:nth-child(3){
transform: rotateX( 90deg
translateZ(100px);
}/*right panel*/
.box> *:nth-child(4){
transform: rotateX(-90deg)
translateZ(100px);
}7. Javascript:boundaries
Create a newfilecalled'code.js'.Javascriptis usedto
apply updatestotheboxin responsetomouse
movements. Aneventlisteneris appliedtothewindow
that will triggerexecutionofcodeeachtimemouse
movement isdetected.Thisstepusesthepositionof
the cursor tocalculatethebox’sx andy co—ordinate
translation withina specifiedboundary.window.addEventListener('mousemove',
function(e){
var x = 10+(e.clientX/20)
if(x> 49)x = 49;
if(x< 35)x = 35;
var y = 20+(e.clientY/30)
if(y> 50)y = 38;
if(y< 20)y = 20;
*** STEP 8 HERE
});8. Translationupdate
The visual updatetotheboxis appliedusingthe
transform style,withtranslationofx, y andz co—
ordinates. First,anarrayis definedtostoreeachof
these translatesettings,followedbya searchfor
the box element.Thesettingsarethenappliedto
the box’s transformstylebyconvertingthearray
into a stringwitheachitemseparatedbya space.var translate = [
'translateZ(26vw)',
'translateX('+x+'vw)',
'translateY('+y+'vh)'
];
var boxNode= document.querySelector('.box');
boxNode.style.transform= translate.join(' ');lightbox________________________________________________ 23Li htBox
2019 wishes