I am trying to get the arrows to start at the exact same point and vary the rotations of the arrows. Below is an example of my code in HTML/JS/CSS and a picture of what i am running into. Any ideas as to how to make the pictures of these arrows overlap better at the origin?
HTML/JS
content.innerHTML= '<div id = "contain"><img class = "arrow" style="transform: rotate(90deg)" src="img/arrow_0]+'.png"</img><img class = "arrow" style="transform: rotate(60deg)" src="img/arrow_1.png"</img><img class = "arrow" style="transform: rotate(75deg)" src="img/arrow.png"</img></div>'
CSS:
#contain {
position: relative;
width: 104%;
height: 132%;
}
#contain img {
position: absolute;
top: 0;
left: 0;
}
.arrow {
transform-origin: 0% 0%;
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
position:absolute;
}
Any pointers appreciated many thanks!!
I think your issue is because the container size & then the transform-origin is at 0%, where as 50% from the top would work better.
.arrow {
width: 200px;
height: 10px;
position: absolute;
left: 200px;
top: 200px;
transform-origin: 100% 50%;
}
#contain-1 .arrow { background-color: red; transform: rotate(90deg); }
#contain-2 .arrow { background-color: green; transform: rotate(45deg); }
#contain-3 .arrow { background-color: blue }
<div id="contain-1">
<div class="arrow"></div>
</div>
<div id="contain-2">
<div class="arrow"></div>
</div>
<div id="contain-3">
<div class="arrow"></div>
</div>
Related
i have a problem for css guru I'm not able to untangle.
This is the html:
<div class="container">
<div class="around">
<img class="depiction around-depiction"/>
<div class="label">A label</div>
</div>
<div class="around">
<img class="depiction around-depiction" />
<div class="label">Another label</div>
</div>
...
<div class="center">
<img class="depiction center-depiction" />
<div class="label">Center label</div>
</div>
</div>
I've applied a transform to .around element to move in a circle around the .center element.
I cannot manage to do two thing :
When i hover over an image the image and its label should go above everything (i put a z-index: 10000 but that doesn't work
Make the .around image above the .around label. You can see by figure two that hover doesn't work on label div.
This is the css:
.container .circle {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin: calc(-100px / 2);
border-radius: 50%;
}
.center {
border-radius: 50%;
z-index: 1;
position: absolute;
}
.depiction {
border-radius: 50%;
cursor: pointer;
transition: 0.2s;
}
.around-depiction:hover {
transform: scale(4);
z-index: 1000000;
}
.center-depiction:hover {
transform: scale(2);
z-index: 1000000;
}
.label {
opacity: 0;
min-width: 200px;
z-index: -2;
background: white;
border-radius: 10px/20px;
padding: 5px;
border: 1px solid black;
}
.center:hover .label,
.around:hover .label {
opacity: 1;
z-index: 5;
}
.center .label:hover,
.around .label:hover {
opacity: 0;
}
Try adding the z-index with position: relative; on your image/label.
z-index doesn't work on the default, which is position: static;
https://coder-coder.com/z-index-isnt-working/
As you can observe in the enclosed picture(https://i.ibb.co/yQSTK0H/test-section.jpg), I have divided specified area into 3 sections. now the problem is that when i toggle to mobile device in chrome developer tools and I'm trying to click in the blue area event fires as if I have clicked in red section.
Why is this happening?
https://codepen.io/anon/pen/xNxZKe
$(".time-filter").click(function (e) {
alert(e.target.className)
});
.time-filter {
position: fixed;
bottom: -100px;
right: -100px;
height: 200px;
width: 200px;
z-index: 99;
}
.time-filter-content {
position: relative;
height: 100%;
width: 100%;
border-radius: 50% !important;
overflow: hidden;
}
.section {
height: 100px;
width: 100px;
position: absolute;
top: 0;
right: 100px;
}
.red {
transform-origin: bottom right;
z-index: 3;
transform: rotate(59deg);
background-color:red
}
.blue {
transform-origin: bottom right;
z-index: 2;
transform: rotate(28deg);
background-color:blue
}
.black {
border-bottom: 0;
z-index: 1;
background-color:black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="time-filter">
<div class="time-filter-content">
<div class="section red">
</div>
<div class="section blue">
</div>
<div class="section black">
</div>
</div>
</div>
I have a jsfiddle I'm working on here: https://jsfiddle.net/laroy/f9dhrrgg/
as you can see, there is a 3D column type image that I've created. I would like to duplicate this, and move the duplication to the right and on top of the original, such that they are overlapping. I've tried figuring it out but haven't been able to, so any help would be appreciated.
The code is as follows:
.ultra {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: white;
z-index: 1;
}
.sub_ultra {
position: absolute;
bottom: 0;
height: 100px;
width: 200px;
overflow: hidden;
background-color: grey;
margin-top: 5em;
z-index: 1;
}
.right_side {
height: 390px;
width: 177px;
overflow: hidden;
background-color: yellow;
margin-left: 10em;
margin-top: -7em;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: -1;
}
.bottom_side {
height: 380px;
width: 142px;
overflow: hidden;
background-color: red;
margin-left: 7.1em;
margin-top: -6.8em;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: -1;
}
<div class="ultra">
<div class="sub_ultra"></div>
</div>
<div class="right_side"></div>
<div class="bottom_side"></div>
This can be easily accomplished by wrapping your image in a relatively positioned container and using jQuery clone to create another copy.
jQuery Fiddle
No jQuery Fiddle
HTML
<div class="container">
<div class="image-wrap">
<div class="ultra">
<div class="sub_ultra"></div>
</div>
<div class="right_side"></div>
<div class="bottom_side"></div>
</div>
</div>
jQuery
$(".image-wrap").clone().appendTo(".container").addClass("shifted")
Js (No jQuery)
var node = document.querySelector(".image-wrap").cloneNode(true);
node.className = node.className + " shifted";
document.querySelector(".container").appendChild(node);
New Css
.container {
position: relative;
margin-top: 20px;
display: inline-block;
}
.shifted {
position: absolute;
top: -20px;
right: -20px;
}
Without scale code works fine, but I need to center vertically an already scaled element. I am looking for solution using CSS or JS approaches.
Also I can not use transform-origin CSS property because it's unsupported in some browsers that I need to support...
https://jsfiddle.net/o62ja9r6/17/
.container {
position: fixed;
border: 2px dashed blue;
width: 400px;
height: 300px;
}
.slide {
position: absolute;
width: 76px;
height: 169px;
background-color: red;
}
.vertical-center {
top: 50%;
transform: scale(0.4) translateY(-50%);
/* transform: translateY(-50%); // <--- it works */
}
<div class="container">
<div class="slide vertical-center">
</div>
</div>
Order matters, swap translateY with scale.
.container {
position: fixed;
border: 2px dashed blue;
width: 400px;
height: 300px;
}
.slide {
position: absolute;
width: 76px;
height: 169px;
background-color: red;
}
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%) scale(0.4);
}
<div class="container">
<div class="slide vertical-center">
</div>
</div>
Quick Explination
If you have an element that is 100px tall and you translate it along the y-axis by -50% it will move up 50% of it's height, which would be 50px. If you scale that 100px tall element first, down to 40% of it's height, then it will be 40px tall when you try to translate it along the y-axis, which will only move it up 20px.
Instead of translate you can use simple CSS for this
.vertical-center {
top: 0;
left:0px;
bottom:0px;
right:0px;
margin: auto;
transform: scale(0.4);
}
for working demo click here
Why would an 'a' tag with href defined not be clickable, that ids wen you point on the pointer doesn't change and the link is not clickable? below is the actual code using Materialize css,
<div class="navbar-fixed">
<ul id="nav-mobile" class="side-nav">
<li><a class="black-text" href="mymenu.html">My Menu</a></li>
</ul>
</div>
.navbar-fixed {
position: relative;
height: 56px;
z-index: 997;
}
.navbar-fixed nav {
position: fixed;
}
.black-text {
color: #000000 !important;
}
side-nav {
position: fixed;
width: 300px;
left: 0;
top: 0;
margin: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
height: 100%;
height: calc(100% + 60px);
height: -moz-calc(100%);
padding-bottom: 60px;
background-color: #fff;
z-index: 999;
overflow-y: auto;
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
you can use the next code:
li{
cursor:pointer !important
}
The important marker is not really necessary but it is to prevent, because I don't know if you are using bootstrapt or another similar framework. Try and coments your results!
Good luck!