blog: crashlaker.github.io
Published
Edited
Feb 20, 2021
md`# CSS Spin`
viewof angle = slider({
min: -3.12,
max: 3.12,
step: 0.1,
value: 0,
title: "angle",
})
chart = {
const div = html`<div style="width:${width}px;height:130px;">`
const body = html`
<style>
img.img1 {
/*transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg);*/
transform: rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg) rotate3d(${x}, ${y}, ${z}, ${angle}rad);
}
/*img.img1{
-webkit-animation: mover1 2s infinite alternate;
animation: mover1 2s infinite alternate;
z-index:3;
}
@-webkit-keyframes mover1 {
0% { transform: translateY(0); }
50% { transform: rotate(20deg); }
100% { transform: translateY(20px); }
}
@keyframes mover1 {
0% { transform: rotate3d(0, 1, 0.5, 0deg); }
100% { transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg); }
/*100% { transform: rotate3d(0, 1, 5, 0deg); }*/
/*100% { transform: translateY(20px); }*/
}*/
</style>
${div}
`
d3.select(div)
.append('img')
.classed('img1', true)
.attr('src', img1)
return body
}
a
a
img1 = FileAttachment('1.png').url()
d3 = require('d3@6')
import {slider} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
