Transition CSS "transform" attribute - html

How do I style the below attribute transform so that instead of becoming:
transform="translate(0,250)"
it becomes:
transform="translate(-45,250)"
so that it shifts the whole object -45 pixels to the left.
Below is the code:
<svg width="365" height="250">
<g class="x_ticks_d3 plain" transform="translate(0,250)"></g>
</svg>


If we talk about "styling" you can do sth. like this with CSS:
g.x_ticks_d3.plain {
-moz-transform: translateX(-45px);
-webkit-transform: translateX(-45px);
-o-transform: translateX(-45px);
-ms-transform: translateX(-45px);
transform: translateX(-45px);
}
But this is NOT changing the svg translation and furthermore the 250 in your svg might not always match pixels (remember the scalable vector thing).
The more promising way is manipulating the attribute using jQuery:
$("g").attr("transform", "translate(-45,250)");

Related

Animate element of svg image in css

I am trying to animate some elements of an image in svg. To test the animation I first tried it on the whole image to check that it works well (it does). But when I change the class state-indicator-illustration by the id note-double-1 (id of the element to animate) the element note-double 1 disappears completely without me understanding why.I specify that to test I inserted the image "line by line" in the HTML code.
Here is the code (i put jsfiddle to avoid very long message) :
JsFiddle: https://jsfiddle.net/pju2ateL/2/
Thanks for your help,
elshiri.

As I've commented: you need to remove the transform attribute of the path.
In order to preserve your transformations I am wrapping the path in a group and transform the group instead of transforming the path. Also I had to change the viewBox since otherwise the path falls outside the svg canvas.
As you can see the css animation is working.
/* .state-indicator-illustration is working */
#note-double-1 {
/*overflow: hidden;*/
transform: translateY(0px);
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="244" height="149.388" viewBox="-15 -320 244 149.388">
<g id="off" transform="translate(-1090, -390)">
<g transform="translate(-28.904 -320.214)" >
<path id="note-double-1" d="M1114.926,434.328l5.138-22.688,22.647,1.41c-.05.226-.093.412-.133.6q-2.918,12.882-5.824,25.761a5.089,5.089,0,0,1-3.018,3.727,7.907,7.907,0,0,1-9.016-2.153c-2.277-2.776-1.476-6.41,1.8-7.774a7.7,7.7,0,0,1,8.184,1.341c.1.083.205.172.31.245h.067l3.237-14.3c-1.28-.081-2.527-.164-3.772-.245-4.355-.272-8.713-.535-13.066-.821-.412-.029-.524.113-.61.49-1.4,6.229-2.861,12.445-4.2,18.686a5.393,5.393,0,0,1-4.558,4.48,7.783,7.783,0,0,1-8.129-3.455,4.664,4.664,0,0,1,1.414-6.408,7.077,7.077,0,0,1,6.186-.777,8.54,8.54,0,0,1,1.767.758A17.8,17.8,0,0,1,1114.926,434.328Z"/>
</g>
</g>
</svg>

How do I fix blurring when using SVG scaled?

HTML
<svg viewBox="0 0 1024 1024">
<path d="M624 96h16l192 224v576.295c0 34.963-28.617 63.705-63.918 63.705h-480.165c-35.408 0-63.918-28.759-63.918-64.235v-735.531c0-35.488 28.693-64.235 64.088-64.235h335.912zM608 128h-320.142c-17.595 0-31.858 14.568-31.858 31.855v736.291c0 17.593 14.551 31.855 31.999 31.855h480.003c17.672 0 31.999-14.238 31.999-31.789v-544.211h-128.067c-35.309 0-63.933-28.37-63.933-64.189v-159.811zM640 144v143.719c0 17.828 14.421 32.281 31.896 32.281h118.503l-150.398-176zM320 320v32h224v-32h-224zM320 224v32h224v-32h-224zM320 416v32h416v-32h-416zM320 512v32h416v-32h-416zM320 608v32h416v-32h-416zM320 704v32h416v-32h-416zM320 800v32h416v-32h-416z" />
</svg>
CSS
svg { width:20px; height:20px; }
output 1 (Firefox 57.0.2)
output 2 (Chrome 63.0)
Scaling the image as shown above makes it look blurry. (https://jsfiddle.net/wutx56co/)
If you know the solution, I would like to answer. Thanks.

try applying this
svg {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0);
}

(CSS) skew img frame without distorting image

I'm making a website that contains many skewed elements, like this:
This isn't too bad, there are CSS transforms that could skew it. But how about this:
The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?

I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.
Demo: http://codepen.io/antibland/pen/eZKxNa

I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.
HTML
<div class="skewed">
<img src="images/sad-kid.jpg">
</div>
CSS
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
OUTPUT
This is similar to Andy Hoffman's method, but supports a greater number of browsers.

Style text with transform

I have an absolute positioned link who's text I wish to transform
to either
transform: rotate(315)
or
Get the text to arc on the inside
Here is what I have now: link
I have tried:
SVG path
Libraries like arktext.js
EDIT
It seems that it has nothing to do with it being absolute.
It was just 315 was not a valid value.

If you are going to use transform, you need to specify that you are using degrees.
transform: rotate(315deg);
Updated pen

Put your text inside p tags then transform that.
<a href="#skills" id="top-left-circle" class="panel">
<p>Hello</p>
</a>
a > p {
-ms-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
http://codepen.io/anon/pen/RWKWOj

Make the other image rotate when hover

Let's say I have 2 pics. Pic A in front of pic B. I want B to rotate when I hover A. Here's my HTML code
<div id="nav">
<img class="button" src="images/ornament.png"/>
<img class="circle" src="images/profile.png"/>
</div>
And my CSS
.circle:hover .button
{
transition: 3s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate (360deg);
}
Please someone help me with this. Thanks a lot!

CSS currently can't transverse the DOM, therefore it wouldn't be possible in this case. You would need JavaScript in order to do that.
In pure CSS, you could, however, do the opposite. Changing the order of the markup:
<img class="circle" src="//.." />
<img class="button" src="//.." />
EXAMPLE HERE
Either use the adjacent sibling combinator, +, or the general sibling combinator, ~.
.circle:hover + .button {
transition: 3s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate (360deg);
}
Using the same HTML, you could also change the visual order by floating the element(s) in the opposite direction. (example)
Aside from this, it's worth noting that you were using .circle:hover .button; which will select an element with class button that is a descendant of a element with class .circle this is in the :hover state.