I there a (css?) possibility to rotate an element on element:hover and keep the new position when moving the mouse out?
It seems that the element rotates back to it`s default position when the cursor leaves the :hover - area.
edit:
now it seems to work (forgot to say, that i wanted it to happen each time/ multiple times):
var rotate = 360;
$('.artistbutton360').bind({
mouseenter: function() {
$(this).css("-webkit-transform","rotate("+ rotate +"deg)");
$(this).css("-moz-transform","rotate("+ rotate +"deg)");
$(this).css("-o-transform","rotate("+ rotate +"deg)");
$(this).css("transform","rotate("+ rotate +"deg)");
rotate = rotate + 360;
}
});
You can use jquery:
$('element').hover(function(){
$(this).css(whatever);
});
remember adding
$(document).ready(function(){
});
Related
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)`
})
I'm having trouble finding the right way to set the angular velocity on an object in a-frame.
<script>
AFRAME.registerComponent("cuberotator", {
init: function () {
console.log("trying to rotate the cube...");
const theta = new THREE.Vector3(0, 20, 0);
console.log (theta);
this.el.setAttribute('angularVelocity', theta);
//where is angularVelocity attribute?
}
});
</script>
I've attached a CodePen example at https://codepen.io/mcanterel/pen/LroRYz
Thanks for any insights.
If You want to rotate the cube around a certain point, you'd have to rotate the points frame of reference.
<a-entity>
<a-box></a-box>
</a-entity>
You can move the cube as you wish, and by rotating the wrapper entity, the cube will rotate around its initial center.
Your component can set the rotation in the tick() function which is called each frame.
tick: function() {
let rot = this.el.getAttribute("rotation")
rot.y += this.velocity // increase it on click or whenever
this.el.setAttribute("rotation", rot)
}
Looking to animate the below SVG, which I have got working initially. However, I want it to 'draw' the second SVG in the opposite direction, WITH the dots i've defined.
Is there any way I can do this? Effectively drawing my shape from left to right with the dots.
Codepen: http://codepen.io/anon/pen/gFcAz
The normal dash offset animation trick really only works with solid lines.
This is the closest I managed to get using CSS animations.
http://jsfiddle.net/L4zCY/
Unfortunately the dashes crawl because you have no control over the step rate of the stroke-dashoffset. If you could make it step by 10 at a time, the dashes wouldn't move.
So I think the only way around it is to use Javascript.
var path = document.querySelectorAll("svg path").item(0);
animateDashedPath(path);
/*
* Animates the given path element.
* Assumes the path has a "5 5" dash array.
*/
function animateDashedPath(path)
{
var pathLength = path.getTotalLength();
var animationDuration = 2000;
var numSteps = Math.round(pathLength / (5+5) + 1);
var stepDuration = animationDuration / numSteps;
// Build the dash array so we don't have to do it manually
var dasharray = [];
while (numSteps-- > 0) {
dasharray.push(5);
dasharray.push(5);
}
dasharray.push(pathLength);
// Animation start conditions
path.setAttribute("stroke-dasharray", dasharray.join(" "));
path.setAttribute("stroke-dashoffset", -pathLength);
// We use an interval timer to do each step of the animation
var interval = setInterval(dashanim, stepDuration);
function dashanim() {
pathLength -= (5+5);
path.setAttribute("stroke-dashoffset", -pathLength);
if (pathLength <= 0) {
clearInterval(interval);
}
}
}
Demo here
Update
It looks like there is an issue with in FF. If you create the "right" number of dashes for the path length, it doesn't quite reach the end of the path. You need to add extra.
A version of the demo that works properly on FF is here
Please check the following fiddle: http://jsfiddle.net/tWUVe/
When you click the div, the p's get deleted, and I expect that the div's height will be animted, but no animation happens. How can I achieve an animation with CSS3 only?
The issue is that there is no opportunity for the transition to occur. What I mean by this is that when elements are removed, they are immediately taken out of the document flow, resizing the parent if needed without a transition.
As a fix for this, you could animate the height of the paragraphs instead (or a similar means)
$('div').click(function() {
var $thisDiv = $(this);
$thisDiv.find('p').css({'height':'0px','margin':'0px'}); // Change p height
// Remove after transition
setTimeout(function() { $thisDiv.find('p').remove(); }, 1000);
});
Demo
I'm trying to rotate an image using the CSS property "transform".
Here is my code :
http://jsfiddle.net/Ucph5/4/
And here is the part (using jquery) that makes the rotation :
$('#rotationX').change(function () {
var rotationX = $(this).val();
for (index = 0; index < selectedElements.length; ++index) {
var selectedElement = $('#' + selectedElements[index]);
selectedElement.css('transform',
'rotateX(' + rotationX + 'deg) ' +
'rotateY(0deg) ' +
'rotateZ(0deg)');
}
});
The problem is that when I select an image (by clicking on it), then use the "range" input to rotate the actual image, and finally move my mouse back over the image, the cursor should be a "cursor", as stated in my CSS. But it appears that only half the image shows the "cursor", the other half seem not to be considered as part of the image and displays a mouse in its normal representation.
This problem does not appear on Firefox (I did not test with Internet Explorer or Safari).
I hope to be clear in my explanation. If you don't understand, I suggest you to click on one of the images, notice that the cursor is visible everywhere over this image, then change the "range" input value, go back over the image, and notice that the cursor appears only on half the image, and not the other.
Does anyone have any idea why this happens ? I tried using the "-webkit-transform" and I still have the problem.
Thanks in advance. :)
The selectable class is in the same z plane that the div that contains it.
When you rotate it, half of it is above the div, and the other half is under the div.
The half that is under the div wont't change the cursor, because it is the div and not the selectable that is under the cursor.
To solve it, make it stay above the parent div (with a translateZ)
selectedElement.css('transform',
'translateZ(100px) ' +
'rotateX(' + rotationX + 'deg) ');
By the way, you don't need your rotateY(0deg)
updated demo