i am trying to rotate a div on y axis using transform but it is not supported in I.E so i used filter as follows
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
but still i cant only rotate it on y axis.. can anyone please help me to find a way to rotate it in I.E.. here is the code
$("#click").click(function() {
$('div').animate({
borderSpacing: -90
}, {
step: function(angle, fx) {
$(this).css('-webkit-transform', 'rotateY(' + angle + 'deg)');
$(this).css('-moz-transform', 'rotateY(' + angle + 'deg)');
$(this).css('transform', 'rotateY(' + angle + 'deg)');
},
duration: 'slow'
}, 'linear');
});
It looks like you are attempting to rotate around the Y axis, which is a 3D transformation. Unfortunately, progid:DXImageTransform.Microsoft.BasicImage (And progid:DXImageTransform.Microsoft.Matrix for that matter) do not support 3D transformations.
Your code should work in IE 10 and above, but you may need to add an additional css line in your step function for "-ms-transform".
I wish I could link to documentation regarding 3D transformations in IE but I have found very little of it myself.
Related
I imported a svg in PaperJS and let it move along a path.
As it moves along the path, I calculate the rotation to let it follow the path with the right rotation.
Now I need a point that is offset from the svg.
Please have a look at this image for a better understanding of what I need:
https://imgur.com/Lyua7oW
I already found it out. If anyone is interested here is the answer:
Add the two points together (offset points of normal and tangent) then add the point of the svg.
var normal = this.strecke.getNormalAt(offset)
var normalOffset = normal.multiply(Math.random() * (this.bubbleOffsetX - (-1)*this.bubbleOffsetX + 1) + (-1)*this.bubbleOffsetX)
var tanOffset = tangent.multiply(this.bubbleOffsetY)
var bubblePosition = normalOffset.add(tanOffset).add(point)
var bubble = new Path.Circle({
center: bubblePosition,
radius: Math.floor(Math.random() * (this.bubbleMaxSize - this.bubbleMinSize + 1) + this.bubbleMinSize),
fillColor: '#A4F2FB',
opacity: Math.random > 50 ? .5 : .3,
})
setTimeout(() => {
bubble.remove()
}, this.bubbleLifespan);
I have a plunker here - https://plnkr.co/edit/E2SJlCo141NhYatVEFMU?p=preview
I have 3 three bars that are made with a start and finish posiiton.
The start position can be higher or lower than the finish.
I want to draw arrows on the bars to illustrate if the start is before or after the finish.
I'm drawing the arrows on the bars and adding classes based on if the bar is going up or down.
I then wanted to use css to set the direction of the arrows by rotating them.
This is all working but arrow is not rotating around its center and so is positioned off the bar.
Is it possible to rotate the arrow and line around its center
.arrow-up{
transform: rotate(180deg);
transform-origin: center center;
}
This looks like it is an issue with transform-origin support in SVG - "Keywords and percentages refer to the canvas instead of the object itself". see the Browser compatibility section here. That comment was listed for Firefox but I experience the same problem for Chrome too.
To demonstrate I forced all 3 arrows to use the arrow-up class and you can see that they seem to have rotated around the same point.
https://plnkr.co/edit/yQ4X18eb7VCItxXswMww?p=preview
So, you can use a rotate transform directly on the SVG line. The following plunker has the start of the code you need but you'll need to calculate you centre x and y values form your data.
https://plnkr.co/edit/JyT9ORnnMCETgpMyCjm1?p=preview
Here's the bit of code you need, but as I say you'll need to replace 100 100 with you're centre of rotation x and y values. You'll be able to dispense with the arrow-up and arrow-down class too.
bar.enter()
.append("line")
.attr("x1", d => x(d.phase) + x.bandwidth()/2)
.attr("y1", (d, i) => {
if(d.start < d.finish){
return y(d.finish)+10;
}else{
return y(d.start)+10;
}
})
.attr("x2", d => x(d.phase) + x.bandwidth()/2)
.attr("y2", (d, i) => {
if(d.finish < d.start){
return y(d.finish)-15;
}else{
return y(d.start)-15;
}
})
.attr('class', (d, i) => {
return d.start > d.finish ? 'arrow-up' : 'arrow-up'
})
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-end","url(#arrow)")
.attr("transform", (d) => {
console.log(d.start, d.finish)
console.log(x(d.phase), x.bandwidth()/2)
return `rotate(180 100 100)`
})
how to select and rotate the texts of the x axis only !
In this Example :
http://dc-js.github.io/dc.js/examples/heat.html
So select from 1 to 20 and rotate them !
I tried this way :
chart
.selectAll("g.cols.axis > text")
.attr("text-anchor", "middle")
.attr("transform", function () {
return "rotate(-20)"
})
.style("fill", "blue");
but it seems that I'am selecting the whole X-axis and not every text separatly .
The fill style works fine but the transformation does not work properly and the axe is entirely rotated.
You must rotate each text element on X Axis around its own center. To do that you must specified the rotation angle AND the center of rotation
rotate(angle centerX centerY)
With that on mind, you can do:
chart.selectAll('g.cols.axis > text')
.attr('transform', function (d) {
var coord = this.getBBox();
var x = coord.x + (coord.width/2),
y = coord.y + (coord.height/2);
return "rotate(-20 "+x+" "+y+")"
});
Remember do it after call to chart.render(); or your selection will be empty
If you want understand why this, take a look at: https://sarasoueidan.com/blog/svg-transformations/
Here the working code
Is something like this what you're looking for?
.cols.axis text{
transform-origin: center;
transform: rotateX(-20deg);
}
I'm not sure if that's the axis you wanna rotate on since it just moves them up over the chart - but for any axis you can just use rotateX/Y/Z!
I'm trying to draw linear gradients with libpixman using the pixman_image_create_linear_gradient() function. It works fine for drawing gradients that run from left to right and from top to bottom but I don't see how I can draw gradients at a specific angle (0-360 degrees) like they're possible in CSS. For example, a linear gradient that is rotated by 45 degrees.
I think one has to use the arguments p1 and p2 for this because they define the gradient direction but there is no documentation at all and I can't really figure out how to use these two parameters to rotate the gradient.
For vertical gradients I simply set them to
p1.x = 0; p1.y = 0;
p2.x = 0; p2.y = height - 1;
And for horizontal gradients I use
p1.x = 0; p1.y = 0;
p2.x = width - 1; p2.y = 0;
But which values should I use for arbitrary rotation? Simply applying a 2D rotation matrix to the points doesn't look right, e.g. when drawing a gradient that is 640x480 and rotating this by 45 degrees I end up with the points
p1.x = 81; p1.y = 560;
p2.x = 559; p2.y = 559;
which draws the gradient in the right direction but there are about 80 pixels of blank space on either side of the gradient so I must be doing something wrong.
Could anybody tell me how to get this right?
Thanks!
I guess that Pixman implements linear gradients in the same way that Cairo does, given that Cairo's image backend uses Pixman, so look at some docs for Cairo. For example, in http://www.cairographics.org/tutorial/ in the section "Drawing with Cairo", subsection "Preparing and Selecting a Source" there is an explanation of linear gradients.
For your 45 degree rotation, I would try the following (one point in the top left corner, the other one in the bottom right one):
p1.x = 0; p1.y = 0;
p2.x = width - 1; p2.y = height - 1;
P.S.: No, I do not know how gradients with an angle are specified in CSS.
I'm working in html, css, and javascript with canvas elements. Sometimes these canvases get css3 3d transformations applied to them (including zooms, rotations, and translations), and I need to predict the 2d-rendered-in-the-browser position of my 3d-transformed canvas, and I'm having some issues with it.
The transformations are actually not being applied to the canvas itself; they're being applied to two container divs around the canvas:
<div class="viewport">
<div class="container-outer">
<div class="container-inner">
<canvas></canvas>
</div>
</div>
</div>
The reason I have two containers is so I can apply two transformations at once. I have css transitions activated on the transforms, so I can, for example, do an x-translation on one container and a y-translation on the other container, and if they have separate easing functions, the resulting animation is a curve rather than a straight line of motion.
I am attempting to predict the position of the four corners of container-inner. The methods I'm using are correctly predicting the result of translations and zooms, but not rotations. Here's how it works. I start with the known original position of a corner, say [0,0,0]. For the sake of the example, we'll say that all of my divs and my canvas are all 500px x 500px, and I have a perspective of 500px set on the viewport div. So my perspective origin is at [250,250,500]. So I take my known corner position, convert it to a heterogeneous 4x1 vector matrix [0,0,0,1], and use matrixVectorMultiply() to multiply that by the matrix3d css matrix corresponding to the transformation being applied to container-inner. I take the resulting vector and use matrixVectorMultiply() again to multiply it by the matrix3d css matrix corresponding to the transformation being applied to container-outer.
matrixVectorMultiply = function(mx, vec)
{ // Given a 4x4 transformation matrix and an xyz vector, this will return the dot product (a new vector)
if (typeof vec.z == 'undefined')
{
vec.z = 0;
}
return {
x: vec.x*mx.array[0] + vec.y*mx.array[1] + vec.z*mx.array[2] + mx.array[3]
,y: vec.x*mx.array[4] + vec.y*mx.array[5] + vec.z*mx.array[6] + mx.array[7]
,z: vec.x*mx.array[8] + vec.y*mx.array[9] + vec.z*mx.array[10] + mx.array[11]
};
};
'vec' is a simple object with x, y, and z attributes. 'mx' is a simple object with two attributes, 'array' containing a row-primary array representation of the matrix3d transformation array, and 'string' containing a column-primary string representation of that array, ready to be plugged into a CSS transform attribute.
Now I have a 3d coordinate that should be the new position of my corner, after the outer and inner transitions have both been performed. But I need to project that 3d coordinate into my 2d viewing window, with the following function:
projection3d = function(pos, origin)
{ // Given an xyz point and an xyz perspective origin point, this will return the xy projected location
// Using the equation found here: http://en.wikipedia.org/wiki/3D_projection#Diagram
var pos2d = {x: null, y: null, z: null},
relPos2d = {x: null, y: null},
relPos = {x: null, y: null, z: null};
// First, we take our given point and locate it relative to the perspective origin, rather than the screen
relPos.x = pos.x - origin.x;
relPos.y = pos.y - origin.y;
relPos.z = pos.z - origin.z;
// Then we take this object and project it onto our 2d plane
relPos2d.x = relPos.x * (Math.abs(origin.z) / Math.abs(relPos.z));
relPos2d.y = relPos.y * (Math.abs(origin.z) / Math.abs(relPos.z));
// Then we take this and locate it relative to the screen again, instead of the perspective origin
pos2d.x = relPos2d.x + origin.x;
pos2d.y = relPos2d.y + origin.y;
return pos2d;
};
I take the result of that function and visually compare it with the actual result of the css 3d transformations in the browser, and find that translations and zooms are being predicted correctly, but not rotations, and I can't for the life of me figure out why not.
Does anyone have any insight? Is there further information I should provide?