I am currently working on a mini game that involves overlaying images on camera views. The goal is to have the gun displayed without the background rectangle, as shown in this image:
https://i.stack.imgur.com/yU4A2.jpg
The code snippet below is relevant for achieving this:
<body>
<!-- Camera -->
<main id="camera">
<!-- Camera sensor -->
<canvas id="camera--sensor"></canvas>
<!-- Camera view -->
<video id="camera--view" autoplay playsinline></video>
<!-- Camera output -->
<img src="//:0" alt="" id="camera--output">
<!-- Crosshair -->
<img src="crosshair.png" class="crosshair" />
<!-- Gun Model -->
<img src="gun_model_1.png" class="gunmodel" />
<!-- Camera trigger -->
<button id="camera--trigger">SHOOT</button>
</main>
<!-- Reference to your JavaScript file -->
<script src="app.js"></script>
<!-- Reference to adapter.js -->
<script src="adapter-min.js"></script>
</body>
CSS:
.gunmodel {
content:"";
position: absolute;
top: 60%;
left: 60%;
display: inline;
-webkit-transform: translateY(0%) translateX(0%);
}
It seems like my CSS styling is not producing the desired outcome.