I need to calculate the width of a rotated div using only the window height and width, so that it only leaves room for an empty triangle in the top left and the bottom right of the webpage.
Something like this (red part is the rotated div):
The problem I have is that the calculation for the correct width needs to work for every window width and height combination. I am convinced this is possible using trigonometry, but it's been quite a while since I actually worked with sin/tan/cos/etc. and so far nothing I tried really worked, so I need some help/pointers.
To summarize what I want to achieve:
There should be an empty triangle top left with an angle of 55 degrees and a height of 150px;
There should also be an empty triangle bottom right with the same dimensions as above
There should be a div that gets rotated like this:
transform: rotateX(45deg) rotateZ(45deg);
transform-origin: top left;
The only thing that should be changed about the rotated div is the "width" css attribute. This values should change depending on the window height and width (these are the only variables).
I have tried multiple things, but I just can't figure it out. Here is my lastest attempt (try changing window size to see the problem):
https://codesandbox.io/s/relaxed-shtern-qphkj
As you can see I managed to always have the exact same top left triangle regardless of window height and width. The problem is the bottom right triangle, that either gets overlapped by the rotated div (aka rotated div is too wide) or the empty triangle gets too large (aka the rotated div isn't wide enough).
Any ideas or pointers would be appreciated.
I have a vertical timeline
Which have the boxes left and right
Similar to
https://www.w3schools.com/howto/howto_css_timeline.asp
if you can see this I want the vertical timeline height to be on the last box circle it should not exceed the circle
What I have done so far :
I calculate the height from using
height: calc(100% - 640px);
and applied break points but this fails in different devices is there any way how can I achieve this
Expected output Image
I have made this SVG slider.
When hovering over the red bars at the bottom the rainbow rectangle #moveSVG should slide from right to left or vice versa.
That works fine, but only if I don't make the #moveSVG responsive.
When I make the SVG responsive by..
.. removing the width and height and setting it with css 100vw and 100vh
.. adding viewBox="0 0 5200 900" preserveAspectRatio="xMinYMax
slice"
..it doesn't work anymore. The rectangle is sliced of.
(See snippet)
Now how can I make this responsive slider without slicing it?
P.S. There are 2 solutions which I would prefer not to use:
instead of moving by setting transform to translate, I can change the viewBox x coordinate, but that seems sloppy since I don't have to change the y width and height
I can use the transform on the sub-SVG #bandsSVG, but in the real project there are 3 sub-SVGs so I would have to do it 3 times. Also seems sloppy.
Code --> https://jsfiddle.net/e_motiv/53w0unc3/
The solution is actually to add a group below the svg and translate that group and leave the svg with responsiveness and viewBox.
<g id="realMoveSGV">..</g>
https://jsfiddle.net/e_motiv/xv93zdx1/
I've been working on this problem for days. I am trying to implement a "free transform" tool for svgs. Similar to that of Raphael.FreeTransform or how you would move/rotate/scale images in MS Word. (Yes, I am aware there are libraries) The following jSFiddle displays my problem: https://jsfiddle.net/hLjvrep7/12/
There are 5 functions in the jsFiddle: rotate-t. shrink-t, grow-t, shrink, grow. The functions suffixed with '-t' also apply the current rotation transformation. e.g.:
grow-t
rect.attr({height : height * 1.25, width : width * 1.25}).transform('r' + degree);
grow
rect.attr({height : height * 1.25, width : width * 1.25});
Once an svg is rotated, then scaled. If you try to rotate the svg again (after scale), the svg jumps. To see this, go top the fiddle:
Hit rotate-t twice. Svg should rotate a total of 30 degrees from the rectangles origin.
Hit grow (not grow-t) twice. Note the top left position of the svg stays the same.
Hit rotate-t once. Note the svg jumps to a different position, then rotates.
Note hitting rotate-t subsequent times will continue to rotate the image around the origin (which is what I want the first time rotate-t is clicked)
One solution I had was to apply the current rotation transformation whenever changing the height and width. This fixes my previous problem, but introduces another problem. To see an example of this, go to the fiddle, and:
Hit rotate-t twice.
Hit grow-t a couple times. Notice the svg grows, but the top left position of the rectangle moves. That's a problem for me. I want the svg to grow without the top left corner to move.
Notes on using the jsFiddle:
Any combination of rotate-t, grow-t, shrink-t will exhibit the ideal rotation behavior (about the origin, no jumping). But this also demonstrates the undesired growing and shrinking (top left position moved when svg is on angle).
Any combination pf rotate-t, grow, shrink will exhibit the ideal scaling behavior (top left corner of svg doesn't move). But this also demonstrates the undesired rotation property (will jump around after different rotations and scales).
Bottom line: I want to be able to the svg rotate around the origin. Then grow the image, while the top left position remains the same. Then rotate the svg again, around the origin without any jumping.
I am aware the how the transform function impacts the local coordinate system of the svg. I'm leaning towards using rotate-t, grow, shrink combo and simply apply some x-y offsets to remove the "jumping" effect. I would imagine there must be some sort of offset I could apply to avoid jumping or shifting during rotation or scaling, but its not clear to me how to calculate such offsets. Any help would be appreciated.
Please don't hesitate to ask anymore questions. Like I said, I've been digging into this for days. Clearly, I don't understand it all, but am somewhat intimate with what's happening and happy to explain anything in more detail.
My solutions for scale, rotate, move back and front etc:
$scope.back = function () {
if($scope.currentImage !==null) {
if($scope.currentImage.prev!=undefined) {
var bot = $scope.currentImage.prev;
$scope.currentImage.insertBefore(bot);
ft.apply();
}
}
};
//Function for moving front
$scope.front = function () {
if($scope.currentImage !==null) {
if($scope.currentImage.next!=undefined) {
var top = $scope.currentImage.next;
if($scope.currentImage.next.node.localName == "image")
$scope.currentImage.insertAfter(top);
ft.apply();
}
}
};
//ZOOM
$scope.zoomIn = function () {
if ($scope.currentImage!= null) {
var ft = paper.freeTransform($scope.currentImage);
if(ft.attrs.scale.y<4) {
$scope.currentImage.toFront();
ft.attrs.scale.y = ft.attrs.scale.y *(1.1);
ft.attrs.scale.x = ft.attrs.scale.x *(1.1);
ft.apply();
ft.updateHandles();
}
}
};
Here's what I'm trying to do:
I have two circular SVG images stacked on top of each other. The top image is grayscale. The bottom image is full-color.
What I'd like to do is, via a 1-100 percentage, remove the top image like the hands sweeping the face of a clock based on number. Let's say I'm at 25%. From 12 o'clock to 3 o'clock the grayscale image would be gone like a pie wedge) revealing the identical full-color image below. (see image for more clarity).
example of radial mask concept
Is this possible to do with HTML5/CSS? JQuery? Some way else I'm not considering?
Here is a fiddle of what i came up with http://jsfiddle.net/3a5eubcv/ .Basically your background image would be the red circle and then you have 2 masks floating over it (divs with semitransparent background). Sorry for not adding the javascript for it as well, but for you 25% = transform:rotate(90deg);.When you reach 50%, the right mask should stop and the left one should continue. 75% = .circle-mask-right{transform:rotate(180deg); .circle-mask-left{transform:rotate(90deg);} .I'm sure the code can be simplified, but hopefully this could get you going.