cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Locating Images With CSS

Aouellets
8-Gravel

Locating Images With CSS

I am working on building out some UI elements for an experience. 

 

Simply, there are buttons at each edge that when clicked with animate in and out a styled panel/grid. 

 

For whatever reason, studio seems to have an invisible div that I cannot edge or remove that is making the top and bottom images sit far from the edge. 

 

See the attached screenshot and classes.

 


.OpenImageTop {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(270deg);
}

.CloseImageTop {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(90deg);
}


.OpenImageBottom {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(90deg);
}


.CloseImageBottom {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(270deg);
}

 

1 REPLY 1

maybe  this would help

.position{
  transform-origin: 10px 10px; //value depends
}

 

by the way, I commented out transform: translate(-50%, -50%);

 

 

Announcements

Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection