17.06.2018, 07:28
Hello:
I want to change the rotation speed that some images have with css class (.vel1) the rotation speed is supplied by one knx object, How can I do it??
Basically, I want to show the wind Speed image, with and image rotation.
I have got the rotation using only in CSS, but I cant get it when I have to pass time parameters, from the KNX objetct. I am doing something wrong.
I would like to know, How can I change the parameters in one CSS class directly from de custom Datasheet-style, for example parameter time for rotation. I want to change the time parameter from class (.vel1), and this change will afecct all images that contains this class in Additional classes.
Best Regard
Roger
**************** Code I have tried *********************
*** from CSS ***
@keyframes rotate {from {transform: rotate(0deg);}
to {transform: rotate(360deg);}}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}}
.vel1{
/* -webkit-animation: 3s rotate linear infinite;
animation: 3s rotate linear infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;*/
}
***** from JavaScript *****
grp.listen("42/2/7", function(object) {
var d = object.value;
$(".vel1").css({
"-webkit-animation: "+d+"s rotate linear infinite",
"animation: "+d+"s rotate linear infinite",
"-webkit-transform-origin: 50% 50%",
"transform-origin: 50% 50%"
});
I want to change the rotation speed that some images have with css class (.vel1) the rotation speed is supplied by one knx object, How can I do it??
Basically, I want to show the wind Speed image, with and image rotation.
I have got the rotation using only in CSS, but I cant get it when I have to pass time parameters, from the KNX objetct. I am doing something wrong.
I would like to know, How can I change the parameters in one CSS class directly from de custom Datasheet-style, for example parameter time for rotation. I want to change the time parameter from class (.vel1), and this change will afecct all images that contains this class in Additional classes.
Best Regard
Roger
**************** Code I have tried *********************
*** from CSS ***
@keyframes rotate {from {transform: rotate(0deg);}
to {transform: rotate(360deg);}}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}}
.vel1{
/* -webkit-animation: 3s rotate linear infinite;
animation: 3s rotate linear infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;*/
}
***** from JavaScript *****
grp.listen("42/2/7", function(object) {
var d = object.value;
$(".vel1").css({
"-webkit-animation: "+d+"s rotate linear infinite",
"animation: "+d+"s rotate linear infinite",
"-webkit-transform-origin: 50% 50%",
"transform-origin: 50% 50%"
});