<div id="root"></div>
div {
height: 100vh;
width: 100vw;
}
.panel {
position: absolute;
box-shadow: 0 0 50px grey;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="72" viewBox="0 0 36 72"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
View Compiled
function transform(offset) {
const cos = Math.cos(offset);
const sin = Math.sin(offset);
return {
transform: `matrix3d(${sin}, ${-cos}, ${sin}, 0, ${-cos}, ${sin}, 0, 0, 0, ${cos}, ${cos}, ${sin}, 0, 0, 0, 1)`
};
}
class App extends React.Component {
state = { styleOne: {}, styleTwo: {} };
onMouseMove = event => {
this.setState({
styleOne: transform(-event.clientX / event.clientY),
styleTwo: transform(event.clientX / event.clientY)
});
}
render() {
return(
<div onMouseMove={this.onMouseMove}>
<div className="panel" style={this.state.styleOne} />
<div className="panel" style={this.state.styleTwo} />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.