I have the following view icon for articles:
.viewIcon {
display: inline-block;
width: 1em;
height: 1em;
background: #888;
position: relative;
border-radius: 65% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.viewIcon:before,
.viewIcon:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
}
.viewIcon:before {
height: .5em;
width: .5em;
background: #fff;
margin-top: -.25em;
margin-left: -.25em;
}
.viewIcon:after {
height: .25em;
width: .25em;
background: #888;
margin-top: -.1em;
margin-left: -.11em;
}
.activeArticle {
transform: scale(1.5);
}
<div class="viewIcon"></div>
<br/><br/>
<div class="viewIcon activeArticle"></div>
As you can see the ".activeArticle" rotates the icon around 45 degrees.
Why is this happening? Am I missing something in the pseudo elements?
How can I fix it/How can I scale it without rotation? (transform/rotate will scale the icon back to the original size)
You are resetting your transform when you specify scale for activeArticle - use this:
.activeArticle {
transform: rotate(45deg) scale(1.5);
}
Demo below:
.viewIcon {
display: inline-block;
width: 1em;
height: 1em;
background: #888;
position: relative;
border-radius: 65% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.viewIcon:before,
.viewIcon:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
}
.viewIcon:before {
height: .5em;
width: .5em;
background: #fff;
margin-top: -.25em;
margin-left: -.25em;
}
.viewIcon:after {
height: .25em;
width: .25em;
background: #888;
margin-top: -.1em;
margin-left: -.11em;
}
.activeArticle {
transform: rotate(45deg) scale(1.5);
}
<div class="viewIcon"></div>
<br/>
<br/>
<div class="viewIcon activeArticle"></div>
Use rotate() & scale() transform property combined, just like this:
.activeArticle {
transform: scale(1.5) rotate(45deg);
}
.viewIcon {
display: inline-block;
width: 1em;
height: 1em;
background: #888;
position: relative;
border-radius: 65% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.viewIcon:before,
.viewIcon:after {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
border-radius: 100%;
}
.viewIcon:before {
height: .5em;
width: .5em;
background: #fff;
margin-top: -.25em;
margin-left: -.25em;
}
.viewIcon:after {
height: .25em;
width: .25em;
background: #888;
margin-top: -.1em;
margin-left: -.11em;
}
.activeArticle {
transform: scale(1.5) rotate(45deg);
}
<div class="viewIcon"></div>
<br/><br/>
<div class="viewIcon activeArticle"></div>
Hope this helps!
Related
I created a hexagon with css which is working well. Now, I am attempting to create somewhat of an arrow to set under the hexagon. In my attempt, I used the pseudo element, :after to try to position the line after the hexagon. For some reason the line is appearing at the top of the hexagon.
This leads me to the next issue, outside of the placement. How would I create an arrow type line (see illustration below) with :after. Is it even possible?
Is there a better way to do this?
#hexGrid {
width: 60%;
position: absolute;
margin: 0 auto;
padding: 0;
right: 5%;
top: 35%;
}
#hexGrid li {
list-style-type: none;
position: relative;
float: right;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
-o-transform: rotate(-60deg) skewY(30deg);
-moz-transform: rotate(-60deg) skewY(30deg);
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
overflow: hidden;
visibility: hidden;
}
#hexGrid li * {
visibility: visible;
}
#hexGrid li .hexagon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2f2f2f;
-o-transform: skewY(-30deg) rotate(60deg);
-moz-transform: skewY(-30deg) rotate(60deg);
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
overflow: hidden;
}
.hexagon:after {
content: '';
position: relative;
display: block;
margin-top: 10px;
width: 50%;
height: 3px;
background: #b82222;
}
<ul id="hexGrid">
<li>
<div class="hexagon">
</div>
</li>
</ul>
Here is how you would change the size of hexagon:
#container {
margin: 50% auto 0;
width: 300px;
height: 300px;
padding: 2px;
border: 1px solid;
transform: translate( 0, -50%)
}
#container>div {
transform: scale(2) translate(50%, 50%);
}
#chevron {
margin-top: 40%;
position: relative;
text-align: center;
padding: 0;
/* try to add more padding and see the difference*/
margin-bottom: 6px;
height: 5px;
width: 100px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, 28deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -28deg);
}
#hexagon {
width: 100px;
height: 55px;
background: #616161;
position: relative;
margin-top: 50px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #616161;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #616161;
}
<div id="container">
<div id="hexagon"></div>
<div id="chevron"></div>
</div>
SVG will be the best solution for this problem.. But still if you want it with CSS, you can create 3 Hexagons and overlap it at 10px gap.
Snippet below:
#hexGrid {
width: 60%;
position: absolute;
margin: 0 auto;
padding: 0;
right:5%;
top: 35%;
}
#hexGrid li {
list-style-type: none;
position: absolute;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
-o-transform: rotate(-60deg) skewY(30deg);
-moz-transform: rotate(-60deg) skewY(30deg);
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
overflow: hidden;
visibility: hidden;
}
#hexGrid li:nth-child(2){
top:-10px;
}
#hexGrid li:nth-child(2) .hexagon{
background: #fff;
}
#hexGrid li:nth-child(3){
top:-20px;
}
#hexGrid li * {
visibility: visible;
}
#hexGrid li .hexagon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #2f2f2f;
-o-transform: skewY(-30deg) rotate(60deg);
-moz-transform: skewY(-30deg) rotate(60deg);
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
overflow: hidden;
}
<ul id="hexGrid">
<li>
<div class="hexagon">
</div>
</li>
<li>
<div class="hexagon white">
</div>
</li>
<li>
<div class="hexagon arrow">
</div>
</li>
</ul>
Again, I would prefer SVG over this solution.
Here's another way of doing that
#chevron {
margin-top: 25px;
position: relative;
text-align: center;
padding: 0; /* try to add more padding and see the difference*/
margin-bottom: 6px;
height: 5px; /* change this to make it bigger */
width: 100px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, 28deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -28deg);
}
#hexagon {
width: 100px;
height: 55px;
background: #616161;
position: relative;
margin-top: 50px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #616161;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #616161;
}
<div id="hexagon"></div>
<div id="chevron"></div>
I would like to have a span within the .btn rotate 180 deg when I click the .btn. However, the span also moved to the right and went down after it was rotated. Could anyone help me explain why it moved like that.
I tried to transform: translate(-21px, 1px) after rotation then the span will moved the right place but I believe there will be another better way to fix it. I also tried transform-origin: 50% 50% but it doesn't work either.
$('.btn').on('click', function(){
$(this).toggleClass('open');
})
#import "https://fonts.googleapis.com/css?family=Raleway";
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before, .btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>
If you remove transform: translate(-50%, -50%); and just keep left:26% and top: 49% It works fine.
To your question why it is happening. Because you have moved it using left and top position and again you are trying to neutralise it by translate. which is moving the center of animation to different position.
$('.btn').on('click', function(){
$(this).toggleClass('open');
})
#import "https://fonts.googleapis.com/css?family=Raleway";
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
top: 49%;
left: 26%;
// transform: translate(-50%, -50%);
position: absolute;
}
.btn::before, .btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>
Your approach isn't working as expected, because after click event, you are transforming the X & Y values of your span using translate property and then rotating it. This causes it to shift it's location when transformed.
You used position: absolute to place your span in middle. this can be also be achieved via other CSS properties like display: table or display :flex
Check out the below suggestion - most of the code is all yours with just slight change.
$('.btn').on('click', function() {
$(this).toggleClass('open');
})
#import "https://fonts.googleapis.com/css?family=Raleway";
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute; */
}
.btn::before,
.btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>
Update this style
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg) translate(20px, 1px );
}
$('.btn').on('click', function(){
$(this).toggleClass('open');
})
#import "https://fonts.googleapis.com/css?family=Raleway";
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before, .btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg) translate(20px, 1px );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>
Check if this is what you are trying to achieve.
Here, I have added a single line to the css transform-origin: 10px;. Everything else is the same. The change in JS is to remove the add class as soon as the animation carried out. Otherwise, you will need to click double times on the button to see the animation again.
$('.btn').on('click', function(){
$(this).addClass('open');
setTimeout(function() {
$('.btn').removeClass('open');
}, 300);
})
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before, .btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg);
transform-origin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>
I am attempting to use a hover effect to transform my second arrow #arrowDown2 to go down to show both arrows. I am wanting the hover to trigger on arrowDownWrap.
What am I doing wrong?
#blue {
width: 100%;
height: 300px;
background: blue;
}
#arrowDownWrap {
position: absolute;
bottom: 120px;
left: 50%;
-webkit-transform: translate(-50%,0);transform: translate(-50%,0);
cursor: pointer;
}
#arrowDownWrapInner {
position: relative;
bottom: 40px;
}
#arrowDown, #arrowDown2 {
border: solid #FFF;
border-width: 0 3px 3px 0;
width: 25px;
height: 25px;
display: block;
padding: 3px;
-webkit-transform: rotate(45deg);transform: rotate(45deg);
position: absolute;
top: 0;
left: 0;
}
#arrowDownWrap:hover #arrowDown2 {
-webkit-transform: rotate(45deg), translate(0, 40px);transform: rotate(45deg), translate(0, 40px);
}
<div id="blue">
<div id="arrowDownWrap">
<div id="arrowDownWrapInner">
<i id="arrowDown"></i>
<i id="arrowDown2"></i>
</div>
</div>
</div>
To specify multiple CSS transform properties, no comma is necessary.
Just list them one after another.
For example:
transform: rotate(45deg) translate(0, 40px);
Working example:
#blue {
position: relative;
width: 100%;
height: 150px;
background: blue;
}
#arrowDownWrap {
position: absolute;
bottom: 100px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
cursor: pointer;
}
#arrowDownWrapInner {
position: relative;
bottom: 20px;
}
#arrowDown,
#arrowDown2 {
border: solid #FFF;
border-width: 0 3px 3px 0;
width: 25px;
height: 25px;
display: block;
padding: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
left: 0;
background-color: red;
}
#arrowDownWrap:hover #arrowDown2 {
-webkit-transform: translate(0, 50px) rotate(45deg);
transform: translate(0, 50px) rotate(45deg);
}
<div id="blue">
<div id="arrowDownWrap">
<div id="arrowDownWrapInner">
<i id="arrowDown"></i>
<i id="arrowDown2"></i>
</div>
</div>
</div>
I have the following code
.heart {
float: left;
margin-top: 10px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
}
.heart:before,
.heart:after {
position: absolute;
width: 10px;
height: 10px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.heart:before {
bottom: 0px;
left: -5px;
}
.heart:after {
top: -5px;
right: 0px;
}
<div class="heart"></div>
However, I need this shape to become a submit button for a form. So I created a button instead with the same class name:
<button type="submit" class="heart"></button>
I'd assume that a button can still just look exactly the same. I've done some reading and noticed i need to have border: none; which I've added, but the shape is still not the same as it was when it was a div.
Remove the default padding and border of the button and you are good to go.
.heart {
float: left;
margin: 10px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
padding: 0; /*added code*/
border: none; /*added code*/
outline:none;
}
.heart:before,
.heart:after {
position: absolute;
width: 10px;
height: 10px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.heart:before {
bottom: 0px;
left: -5px;
}
.heart:after {
top: -5px;
right: 0px;
}
button.heart:active,
button.heart:active:after,
button.heart:active:before {
background-color: #e80202;
box-shadow: inset 1px 1px 1px #c50b0b;
}
<div class=heart>
</div>
<button type="submit" class="heart"></button>
Note: You can also change the style a little when is clicked by using
:active selector.
The button has default padding applied to it. Remove that in addition to the border:
.heart {
float: left;
margin-top: 10px;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
padding: 0;
border: 0;
}
.heart:before,
.heart:after {
position: absolute;
width: 10px;
height: 10px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
.heart:before {
bottom: 0px;
left: -5px;
}
.heart:after {
top: -5px;
right: 0px;
}
The html for this css is simply:
<button type="submit" class="heart"></button><br><br>
<div class=heart>
</div>
I have a tab that is currently residing on the left side of my screen. What I would like to do is move it to the right side and also move it up some. I will post what I have for it residing on the left side:
CSS
#feedback {
position: fixed;
left: 0;
bottom: 0;
height: 250px;
margin-left: -3px;
margin-bottom: -3px;
}
#feedback-tab {
float: right;
color: #fff;
font-size: 20px;
cursor: pointer;
text-align: center;
width: 120px;
height: 42px;
background-color: rgba(0,0,0,0.5);
margin-top: 60px;
margin-left: -42px;
padding-top: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#feedback-tab:hover {
background-color: rgba(0,0,0,0.4);
}
HTML
<div id="feedback">
<div id="feedback-tab">Feedback</div>
</div>
I think this is what you want.
CSS:
#feedback {
position: fixed;
right: 0;
bottom: 150px;
height: 250px;
margin-left: -3px;
margin-bottom: -3px;
}
#feedback-tab {
float: right;
color: #fff;
font-size: 20px;
cursor: pointer;
text-align: center;
width: 120px;
height: 42px;
background-color: rgba(0,0,0,0.5);
margin-top: 60px;
margin-right: -42px;
padding-top: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#feedback-tab:hover {
background-color: rgba(0,0,0,0.4);
}
AND HTML:
<div id="feedback">
<div id="feedback-tab">Feedback</div>
</div>
Try this:
#feedback {
position: absolute;
right: 0;
bottom: 0;
height: 250px;
margin-right: -3px;
margin-bottom: -3px;
}
Also, not knowing the parent of this element can difficult the answer, in my opinion.