I am trying to build a responsive, rotating circle similar to the one in this screenshot http://grab.by/PRrw from the www.wove.com menu.
So far, I have a responsive circle using a percentage padding-top and width to make the circle fit a minimum 100vh div, and elements placed on that circle. The issue is ensuring that the elements on the circle remain in place when the browser is resized. Any ideas on the best approach to accomplish this?
jsFiddle: https://jsfiddle.net/szjkrbut/1/
The CSS
.radial-menu {
border: solid 1px #999;
border-radius: 50%;
height: auto;
padding-top: 105%;
position: absolute;
right: -50%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
width: 105%;
z-index: 1;
}
.radial-item {
display: block;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
width: 35%;
max-width: 290px;
&:after {
background: #999;
border-radius: 50%;
content: '';
height: 8px;
position: absolute;
right: -40px;
top: 50px;
transition: 300ms all ease;
width: 8px;
}
&.item-1 {
transform: rotate(22deg) translate(-231%, 35px);
}
&.item-2 {
transform: rotate(0deg) translate(-237%, 35px);
}
&.item-3 {
transform: rotate(-22deg) translate(-240%, 35px);
}
}
Related
I'm trying to get the toggle to move it 100% to the right. As I'm trying to make it responsive, I can't set it to move an xx amount of pixels.
Can you please help?
input:checked + .slider:before {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
https://jsfiddle.net/Lc1tdhgb/1/
Thanks
setTimeout(function() {
document.getElementById('togBtn').checked = true;
}, 1000)
#toggle {
width: 100%;
height: 100%;
position: relative;
}
.switch {
position: absolute;
display: inline-block;
width: 100%;
/*min-height: 32px;*/
height: auto;
top: 0;
}
.switch input {
display: none;
}
.slider {
cursor: pointer;
background-color: #ca2222;
-webkit-transition: .5s;
transition: .5s;
border-radius: 32px;
padding: 12px 0;
}
.slider:before {
position: absolute;
content: "";
height: 1.1em;
width: 1.1em;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .5s;
transition: .5s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #3eab37;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
left: calc(100% - 20px);
/*-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);*/
}
/*------ ADDED CSS ---------*/
.slider:after {
content: 'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 0.7em;
font-family: Roboto, sans-serif;
}
input:checked+.slider:after {
content: 'ON';
}
/*--------- END --------*/
<div id="toggle">
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>
</div>
Well, just make sure that the container of the elements follow a position: relative;, so the wrapper have the restrains for the absolute elements inside of it. Then, right is actually how far from right you want the element to be, in this case, you could've used either right: 0%; or left: 100%; although you've encountered the error in the fact that you'd be ignoring margins from the parent's style. That's why I added left: calc(100% - 20px); (20px was on trial and error, until I got it aligned with the outter border of the switch!), then now it works as wanted. Glad to help :)
I have an svg icon for a website that I would like to make into a css shape so that I can make a custom effect on hover.
I am using pure CSS for this and am not sure I am approaching the problem correctly.
.wrapper {
position: relative;
height: 100vh;
}
.square {
height: 40px;
width: 40px;
background-color: black;
transition: all .2s;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:after {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.square:hover {
transform: scale(1.2) translate(-50%, -50%);
}
.square:hover .square:before {
transform: scale(1.2);
}
.square:hover .square:before, .square:hover .square:after {
height: 4px;
}
<div class="wrapper">
<div class="square"></div>
</div>
https://codepen.io/Portismouth/pen/ZEEXeVP
so far I am using a simple square with a cross created using the :before and :after psuedo-selectors. On hover, Im trying to make the square bigger and the lines thicker to give the impression i'm going for.
It's basically a 2 x 2 grid of squares that I want to expand out from the middle of the square on hover. Should I create a square with four separate squares or continue with my approach so far.
Thanks in advance.
Your code works correctly. If you want to hover and it'll expand from middle of square, don't use translate(-50%, -50%); when hover on square
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.square {
height: 40px;
width: 40px;
background-color: black;
transition: all .2s;
}
.square:before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:after {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.square:hover {
transform: scale(2);
}
<div class="wrapper">
<div class="square"></div>
</div>
When I hover over the image, the transition works fine except for the fact that the front image (that of a rotating lock) only translates 20px in Z direction when the mouse is removed from that image. I want the rotating lock image to be 20px in front always.
Also, why does the rotating lock image becomes slightly smaller just after I hover the image?
body {
margin:0;
width: 100%;
height: 100%;
}
.maincircle {
width: 200px;
height: 200px;
position: relative;
margin-left: 200px;
margin-top: 10px;
border-radius: 50%;
border: 1px solid black;
perspective: 600px;
transform-style: preserve-3d;
}
.door {
background-color: gray;
border-radius: 100%;
height: 200px;
margin: 0;
position: relative;
width: 200px;
transition: .5s linear;
transform-style: preserve-3d;
transform-origin: 0 50%;
transition: transform 2s 0.5s;
}
.door:before {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
border-radius: 100%;
content: '';
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 200px;
transform: translateZ(-5px);
}
.door:after {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
bottom: 0;
content: '';
left: 100px;
position: absolute;
top: 0;
width: 5px;
z-index: -10;
transform: rotateY(-90deg);
transform-origin: 100% 50%;
}
.maincircle:hover .door {
transform: rotateY(-110deg);
}
.maincircle:hover .locker {
transform: rotate(90deg);
}
.locker {
background-image: url("https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png");
position: absolute;
top: 25px;
left: 25px;
background-size: 100% 100%;
border-radius: 100%;
width: 150px;
height: 150px;
transform: translateZ(20px);
transition: transform 0.5s;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="maincircle">
<div class="door">
<div class="locker"></div>
</div>
</div>
</body>
</html>
Question 1: (I want the rotating lock image to be 20px in front always)
It is because transform settings are not additive in nature. When you specify the transform during the :hover as give below,
.maincircle:hover .locker {
transform: rotate(90deg);
}
it overwrites the transform: translateZ(20px) that is specified within the default state (which is the setting under .locker selector) and so the translation in Z-axis is lost whenever the element is being hovered. It gets applied back only when the :hover is off (that is, the element returns to default state as specified in .locker selector).
In order to always have the translation in Z-axis, translateZ(20px) should be added to the transform stack within :hover selector also like below:
.maincircle:hover .locker {
transform: rotate(90deg) translateZ(20px);
}
body {
margin:0;
width: 100%;
height: 100%;
}
.maincircle {
width: 200px;
height: 200px;
position: relative;
margin-left: 200px;
margin-top: 10px;
border-radius: 50%;
border: 1px solid black;
perspective: 600px;
transform-style: preserve-3d;
}
.door {
background-color: gray;
border-radius: 100%;
height: 200px;
margin: 0;
position: relative;
width: 200px;
transition: .5s linear;
transform-style: preserve-3d;
transform-origin: 0 50%;
transition: transform 2s 0.5s;
}
.door:before {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
border-radius: 100%;
content: '';
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 200px;
transform: translateZ(-5px);
}
.door:after {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
bottom: 0;
content: '';
left: 100px;
position: absolute;
top: 0;
width: 5px;
z-index: -10;
transform: rotateY(-90deg);
transform-origin: 100% 50%;
}
.maincircle:hover .door {
transform: rotateY(-110deg);
}
.maincircle:hover .locker {
transform: rotate(90deg) translateZ(20px);
}
.locker {
background-image: url("https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png");
position: absolute;
top: 25px;
left: 25px;
background-size: 100% 100%;
border-radius: 100%;
width: 150px;
height: 150px;
transform: translateZ(20px);
transition: transform 0.5s;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="maincircle">
<div class="door">
<div class="locker"></div>
</div>
</div>
</body>
</html>
Question 2: (Why does the rotating lock image becomes slightly smaller just after I hover the image?)
I am putting this at the last (even below the code) because I know by now you'd have guessed why it became smaller. It becomes smaller because the element is losing the translateZ(20px) and so it is going farther away from your eye. Any object that goes farther away from the eye will look smaller.
I'm trying to achieve the following container in CSS3. I tried with transform: skewY but i don't have the desired result. I know that I can achieve it with 3d Transforms, but I have in mind our lovely Internet Explorer. Also I tried to play with pseudo elements but I lost it. Is there any css rule that I can, lets say, increase the height of the top and bottom right corners?
JSFiddle
Thank you
You could use skewed pseudo elements for this (ensuring the skews are on the pseudos, and not the element itself):
div {
position: relative;
height: 200px;
width: 80vw;
margin: 10vw;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 90%;
width: 100%;
-webkit-transform: skewY(5deg);
-ms-transform: skewY(5deg);
transform: skewY(5deg);
background: gray;
z-index: -1;
}
div:before {
content: "";
position: absolute;
height: 90%;
width: 100%;
left: 0;
bottom: -20%;
background: gray;
-webkit-transform: skewY(-5deg);
-ms-transform: skewY(-5deg);
transform: skewY(-5deg);
z-index: -1;
}
html {
background: url(http://placekitten.com/g/300/300);
}
<div>Content!!</div>
Well, all i am trying to do is getting 7 circle icons around the top part of a half-circle. Here's a demo with only first 3 icons placed in order: http://jsfiddle.net/yxVkk/15/
That's how icon positioning is done now:
.one {
left: -35px;
top: 30px;
}
I found this way pretty complicated to arrange all icons this way and i thought there has got to be a better way of doing it.
I tried this method but it just didn't work: http://dabblet.com/gist/3864650
Is there any other way of doing it?
The method from your link works perfectly.
jsFiddle
CSS
.circle-big {
position: relative;
height:180px;
width:180px;
padding: 21px;
border-radius: 50% 50%;
margin: 100px;
}
.circle-big:before {
position: absolute;
height: 90px;
width: 180px;
border-radius: 90px 90px 0 0 ;
background: green;
content: "";
}
.circle {
border-radius: 50%;
width: 30px;
height: 30px;
background-color: red;
display: block;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin: -15px;
}
.one { transform: rotate(-30deg) translate(130px); }
.two { transform: rotate(-50deg) translate(130px); }
.three { transform: rotate(-70deg) translate(130px); }
.four { transform: rotate(-90deg) translate(130px); }
.five { transform: rotate(-110deg) translate(130px); }
.six { transform: rotate(-130deg) translate(130px); }
.seven { transform: rotate(-150deg) translate(130px); }
Hope it's what you expected.
If you want to increase the distance between the big circle and the small ones just increase the translation.