I was browsing though websites to get some inspiration and I came across this one: http://sozodesign.co.uk/
I was wondering how they got the angled div effect? Does anyone know of a tutorial/documentation they can forward to me?
Thanks,
Callum
Translate and Skew are the two transformation methods which are used in that website to get the desired effect.
The translate3d() function is used to translate the element by a vector
[tx, ty, tz], where tx is the translation along the x-axis, ty is the
translation along the y-axis, and tz is the translation along the
z-axis. The values tx, ty, and tz are provided either as a or
as a percentage.
The skew() method is used to skew an element along the X and Y-axis by
the given angles.
You can have a clear view on these and other transformation techniques at codrops
Related
For example, imagine, I want to create a rectangle in SVG where the height is equal to (3*width)^2+width and add, at the bottom, a circle of radius width/2 (cx,cy, r = f( width)). Everything depends only of one parameter : the rectangle width.
I know it is possible to do it with javascript but I would like something more direct. Is it ccs variable, the only alternative ?
Thanks for answer.
Rq : I read this post (How do I define or reference a variable in SVG?) but it is rather old (from 2015) and it seems the situation has not so much evolved or I googled poorly.
Does anyone know how to put a margin at the top of the chart? I don't know if it's possible or a bug.
I already tried to modify the .margin({top: x, right: x, bottom: x, left: x}) but this is not the margin that I'm looking for. Setting the chart.yDomain() isn't good because I want the chart to rescale.
EDIT
My interest is that the linewithfocuschart rescale, not just force the domain.
The issue seems to be when the tooltip appears at the highest point in the chart. Maybe a bug, not really sure.
But here's one way of doing it, might not be the best way:
chart.forceY([0,160]);
By looking at your chart I'm assuming that 140 is the highest value in you chart. So I'm forcing the Y axis on the chart to show values between 0-160.
Update
Earlier I suggested the use of chart.forceY([0,160]); as a work around to adding margin to the chart top so the tooltips are clearly visible with the highest points. Although this approach only makes changes to the main chart and not the focus chart.
After some further investigation, I found out that you could use the following to rescale the chart and the focus:
chart.lines.forceY([0, yMax])
chart.lines2.forceY([0, yMax])
Here's a working example of using with a NVD3 lineWithFocusChart(). I have also got the yMaxdynamically in line 15 of my code.
Following up on my question from yesterday:
SciChart - showing labels for all ticks
Thanks to the answer I was able to get the label density where I needed it. But I still have problems with label placement. As you can see in the screenshot, rotating the labels caused them to stick upwards into the graph. I need them below the axis. I've tried everything I could find in the API that I thought might help me:
a TranslateTransform - I tried moving both X and Y both ways. No
result.
VerticalAnchorPoint and HorizontalAnchorPoint - setting
VerticalAnchorPoint to Center actually moved the labels, but only by
3mm and in the wrong direction.
Horizontal/Vertical
Alignment/ContentAlignment - didn't do anything.
I've even tried
bloating the labels by appending a lot of spaces to the strings. A desperate attempt, I know.
Furthermore, the horizontal position of the labels is not correct either. In the screenshot you can see the first bump on the graph goes down on what looks like CF.02. But in reality it's set to CF.01. It would seem the labels are moved to the left of their corresponding tick. I need them to be displayed below the center of their respective tick, like the original solution.
[edit: image removed to prevent potential client IP issues]
In the SciChart's WPF Xaml Styling a Chart example there is a demonstration of how to rotate labels by changing the AxisBase.TickLabelStyle.
This uses RenderTransform to rotate labels by 15 degrees. However, if you use 90 degrees, the labels overlap the surface.
Changing the RenderTransform to LayoutTransform forces labels to be drawn in the correct place (below the axis).
You can read more about the difference between RenderTransform and LayoutTransform here.
I have been looking into the RagdollDemo and have kind of got stuck in the part where setEulerZYX() is used in basis matrix.
transform.setIdentity();
transform.setOrigin(btVector3(btScalar(-0.35), btScalar(1.45), btScalar(0.)));
transform.getBasis().setEulerZYX(0,0,M_PI_2);
m_bodies[BODYPART_LEFT_UPPER_ARM] = localCreateRigidBody(btScalar(1.), offset*transform, m_shapes[BODYPART_LEFT_UPPER_ARM]);
I did some research, yet couldn`t fully understand what exactly does this function do and why it is needed. Any help would be very nice.
It is a way (there are others) to set the rotation of the body.
http://bulletphysics.org/Bullet/BulletFull/classbtMatrix3x3.html#a0acce3d3502e34b4f34efd275c140d2a
So this is setting it to 0,0,M_PI_2, M_PI_2 being Pi/2 means this is a rotation on the x axis of 1/4 turn, i.e. 90 degrees.
I am new to this. I want to make a clock similar to the one given here. But they have used images. Instead I want to make use of ARC. Does anyone know, how can we make an arc, that too using only css? Consider an example that I have to make an arc of 15 degrees. Any kind of suggestions are greatly appreciated.
Thanks in advance.....
I'd recommend you use SVG to do this. The markup is fairly simple, but you'll need to stay aware that there are four different rules which affect which side of the two end points the bulge of the arc with lay and if the bulge will try to take the "short way" or the "long way" with the given radius.
Here's an example. Use a stylesheet like this:
.arc{
fill:tan;
stroke:red;
stroke-width:4px;
}
combined with an svg path like this:
<svg width="100" height="100">
<path d="M 10,40 A 50,50 0 0 1 90,70"/>
</svg>
In short the commands in the above example are
M (move mode with absolute coordinates)
x,y (start the arc here here)
A (arc mode with absolute coordinates)
r1,r2 (the two radius of the ellipse that the arc goes around. use the same value twice for a circle)
z rotation (the rotation of that ellipse. 0 is no rotation)
large arc flag (see fiddle link below)
sweep flag (see fiddle link below)
x,y (where the arc will end)
I made this fiddle to demonstrate all the different combinations of the two flags in movement which helps me a lot in deciding which ones to use. http://jsfiddle.net/rgbk/avpye8nm
The W3C docs are here: http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands They describe z rotation as "x-axis-rotation" which is wrong.
Does it have to be CSS ? or could you use HTL5 canvas?
http://www.w3schools.com/tags/canvas_arc.asp
then you could use that canvas to do the animation instead of using CSS animations...