Because of the parent the text become also be scaled. How can I fix this? The formula 1/a (a=scale factor) doesn't work.
http://codepen.io/anon/pen/yYxpaj
<div class ="rhombus"><p>text</p></div>
p {
color: white;
transform: scaleY(1.7391304) rotate(-45deg) ;
font-size: 30px;
}
.rhombus {
width: 27vw;
height: 27vw;
margin: -2vw 6.5vw;
background: #000;
transform: scaleY(.575) rotate(45deg) ;
}
I also want the text inside the rhombus and not outside of it, but the transform makes that not possible.
Your problem is the order of those operations. If you scale before rotating, the text will scale into a wrong direction (by 45 degrees), so just swap scaleY(1.7391304) and rotate(-45deg), leading to
p {
color: white;
transform: rotate(-45deg) scaleY(1.7391304);
font-size: 30px;
}
Updated example
Related
I have a Button Element that is styled with hover the way I would like it to look. However, it was suggested to me that I should use a link and style it to look like a button in order to preserve default browser button styling.
So that Ideally the button by itself does nothing, but clicking it activates its link.
I have tried to make it a link, then a link over the element, removing span, all while changing the CSS to suit <a> but the overall styling and hover go strange.
<button>Hover Me!</button>
Hover Me!
Could anybody please help shed some light on where I'm going wrong and how to make this button element a link while still looking like the button?
Thank you in advance for any suggestions.
This Is the button element.
Code Pen Link
Button Element
<button class="g2b-button" title=""><span>Hover me!</span></button>
CSS
.g2b-button {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #fff;
font-weight: 700;
font-size: 14px;
background-color: #A7784A;
padding: 17px 55px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}
.g2b-button span {
position: relative;
z-index: 1;
}
.g2b-button:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #31324E;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.g2b-button:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
Just change display: block under .g2b-button to display: inline-block. This is because anchor tags (<a>) are treated different by the browser than button tags (<button>).
In addition to the other answers. There is also an important syntax consideration. Buttons would be used for forms or accordions or card flips, opening or closing modals and other on-page dynamics, things which do not change to a different page. Links would always be used when taking a visitor to a new page. Your post vaguely suggests linking to another page so <button> would not be good syntax.
In other words, preventing children from being affected by parent property
so i tried to rotate these buttons on hover first then other things, but let's focus on hover for now, but the problem is that it rotates the nested img too..
i tried many things to prevent it, but the img kept rotating
best solution so far is rotate it oppositely, I'm not satisfied at all with this solution cause it rotates again on mouse leave
here's some code been using
<div class="h2_2006">
<button class="h2_2601">
<img class="h2_2611" title="Add To Cart" src="https://s.svgbox.net/materialui.svg?ic=add_photo_alternate" alt="Add To Cart">
</button>
<button class="h2_2602">
<img class="h2_2621" title="Watch" src="https://s.svgbox.net/materialui.svg?ic=alarm_add" alt="Watch">
</button>
<button class="h2_2603">
<img class="h2_2631" title="Fav" src="https://s.svgbox.net/materialui.svg?ic=auto_awesome" alt="Add To Favorite">
</button>
</div>
and some scss with failed :after pseudo examples
//scss
.h2_2006 {
#include grid(1fr 1fr 1fr, 1fr);
align-items: center;
grid-gap: 3.3vw;
>button {
justify-content: center;
display: flex;
align-content: center;
max-height: 5.2em;
max-width: 5.2em;
border-radius: 50%;
padding: 0;
border: 0;
transition: all 1s;
position: relative;
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
transition: all .5s ease-in-out;
transform: translateX(-100%) translateY(-25%) rotate(45deg);
}
&:hover:after {
transform: translateX(-9%) translateY(-25%) rotate(45deg);
transition: all 1s;
}
>:not(img) {
pointer-events: auto;
}
}
.h2_2601 {
#include pos(auto, 1, 2, center, center);
background: linear-gradient(134deg, rgb(10, 32, 58) 50%, rgb(15, 48, 87) 50%);
.h2_2611 {
z-index: 1;
outline: none;
transform-origin: 0 0 0;
}
}
.h2_2602 {
#include pos(auto, 1, 3, center, center);
background: linear-gradient(134deg, rgb(15, 48, 87) 50%, rgb(10, 32, 58) 50%);
content: "";
&:hover,
&:focus {
outline: none;
transform: rotate(0.5turn);
transition: transform 1s;
}
.h2_2621:hover {
outline: none;
transform: rotate(-180deg);
transition: transform 1s;
}
}
}
now, idk what have i missed out here cause i'm turnin off already
any help would be much appreciated
In general, a css class affects everything within it. So, if you do not want your svgs to be rotated, you can place the rotating class on something more specific (like adding another div for only those items that need to be rotated, so long as they are just siblings).
If you need a parent in the hierarchy to be rotated, but not the child, then you can specify the counter-style on the child (which you mentioned as a method you would not like to use)
The important thing to understand here is that your svg within the button is like putting a picture on a disc - if you rotate the disc, the picture will appear to rotate too, unless you rotate it in the opposite direction.
Here is an interesting article about different layers of specifying css. Perhaps this can help you find a solution
I've got a simple input toggle that reveals text when 'toggled'.
Codepen
HTML
<div class="window">
<input type="checkbox" id="punch" class="toggle">
<label for="punch">
<img class="arrow" src="http://45.79.67.59/moreinfo_arrow.png">
</label>
<div>
<h3>codepen.io</h3>
</div>
</div>
CSS
div.window {
color: #000;
width: 100%;
background: #fff;
margin: 0px;
font-family: Arial Black, sans-serif;
font-size: 20px;
}
div.window label{
display: block;
width: 1%;
transition: all 0.75s 0.25s;
transform: rotate(0);
}
input.toggle ~ div {
height: 0px; margin: .1rem;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div { height: 60px; }
input.toggle:checked + label { transform: rotate(180deg); }
input.toggle { display: none; }
When the toggle <img> is 'checked', I'd like it to rotate 180˚, however, I've had trouble making the image rotate on it's center axis. It currently rotates on it's edge: good for eliciting a chuckle... not so good for potential users.
Any help is very much appreciated!
Problem
The origin of your transformation is not the center of the image. So it rotates about the wrong reference point. See the following picture:
This picture is showing the result of rotating a square using transform: rotate(45deg) with different transform-origin values.
Solution
Normally just add transform-origin: center center; to the transform property (but to be honest, that's also the default value).
So your actual problem is that you specified the transition on the parent (of the image) what means it will take the center of the parent. Since you specified the width as 1% the center isn't the same as the center of the image. So to solve this I've felt free to change this to the width of the image (what is in this case width:200px;).
Alternatively you could specify the origin manually with absolute values (in your case transform-origin:100px 100px;).
See JSFiddle.
I've been working on variations of this issue for a while. Currently I have the animation working in all browsers, but setting the body margin to 0 in FF breaks it as shown below.
I've had to target all other browsers, set the body margin, and just leave it showing in FF. Obviously this isn't ideal as I'd like the layout to be uniform.
Please use firefox to re-create the issue.
Here's the working Jsfiddle
HTML
<header class="header">
<div class="header-container">
<div class="top-header-ani ani slide-t navbar">
Home</div>
<div class="main-header-ani"><span class="mainheader">△</span></div>
<div class="bottom-header-ani ani slide-b">
<span class="maintitle">tetris<span class="yel">for</span>kicks</span>
<br>
<span class="subtitle">web development & design</span></div>
</div>
</header>
CSS
header {
margin-top: 50px;
}
.header-container {
width: 100%;
height: 200px;
margin: 100px 0 0 0;
position: absolute;
}
.main-header-ani {
font-family: 'quicksand', helvetica;
text-align: center;
line-height: 200px;
background-color: #a2aba2;
width: 100%;
height: 200px;
position: relative;
}
.top-header-ani {
width: 100%;
height: auto;
text-align: center;
position: relative;
z-index: -1;
}
.bottom-header-ani {
width: 100%;
height: auto;
text-align: center;
position: relative;
z-index: -1;
}
/*................... index font stying ...................*/
.yel {
color: #eac961;
}
.navbar {
text-transform: uppercase;
font-family: helvetica;
word-spacing: 10px;
}
.maintitle {
color: #a2aba2;
font-family: helvetica;
font-size: 50pt;
}
.mainheader {
color: #fff;
font-size: 110pt;
}
.subtitle {
font-family: helvetica;
}
header a {
color: #000;
text-decoration: none;
}
header a:hover,
header a.hover {
color: #eac961;
}
/*................... index header animations ...................*/
.ani {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.slide-t {
animation-name: slide-t;
}
#keyframes slide-t {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, -100%, 0);
}
}
.slide-b {
animation-name: slide-b;
}
#keyframes slide-b {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 10%, 0);
}
}
Run the above. You'll see that both animations transtion from behind the heasder div perfectly.
If you add the CSS:
body {
margin: 0
}
To the jsfiddle, you'll notice the bottom aniation stretches as it plays out.
Does anyone know why this is occuring?
Does anyone know how to fix it?
I've tried -moz- animations settings, no effect.
I've also got an idea for a work around:
Currently in firefox I get a scroll bar at the bottom due to the extra space taken up by the body's margin. If there's a way for me to set the scroll position to the absolute right by default, I can hide the X scroll bar and disable it which would hide the body margin entierly.
-
Anyway, this one's killing me. Any ideas are greatly appreciate.
Thanks.
Ok, so I've figured out the issue.
It's actually a display driver issue with my laptop. XPS 13 9530.
My friend checked the test site upload on his PC and it works perfectly as it is, I get the ghosting on my laptop. So I tested on another PC, and it works perfectly.
I disabled hardware acceleration in my FF and it works perfectly.
I've tried various graphics drivers, but it appears to be a windows 10 issue with my laptop. I'm getting a few other weird issues with firefox rendering, for instance the close buttons on my tab bars are duplicated, sometimes FF loads with a full white screen and I need to restart it, etc...
So, mark this as fixed. Thanks very much for your help.
Try using "px" values for firefox, not "%" for
transform: translate3d(0, -100px, 0);
Import the normalize.css:
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
or download it from:
Here
Webkit bug tracker: https://bugs.webkit.org/show_bug.cgi?id=110056
related question: Chrome CSS3 3D Transform bug
In chrome, when using css on elements with large width / height values, once a threshold of size and/or number of elements is reached, parts of the screen are no longer painted.
Please see the following test page: http://jsfiddle.net/AxkEj/35/
Note: there is transform scale on the orange container causing it to appears much smaller than the actual pixel size.
If you increase the width (as instructed on the page) to around 7000 px (depends on various factors such as screen size.
code example (to comply with SO rules):
body {
background: red;
}
body, div {
padding: 0;
margin: 0;
}
h1 {
font-size:20px;
margin:10px;
}
.wrapper {
width: 5000px;
height: 5000px;
-webkit-transform: scale(0.125);
-webkit-transform-origin: 0 0 0;
-moz-transform: scale(0.125);
-moz-transform-origin: 0 0 0;
background: orange;
}
.wrapper div {
float:left;
height:46%;
width:46%;
margin:2%;
}
.wrapper:hover > div {
-webkit-transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
}
.rz {
background: violet;
}
.wrapper:hover .rz {
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
}