I am currently attempting to replicate a cube within a webpage I am constructing using react (I am relatively new to react, so please bear with me if this is a novice question)
Creating a component that contains the HTML structure for the cube.
class Cube extends Component {
render() {
return (
<div className="cube">
<div id="wrapper">
<div class="viewport">
<div class="cube">
<div class="side">
<div class="cube-image">1</div>
</div>
<div class="side">
<div class="cube-image">2</div>
</div>
<div class="side">
<div class="cube-image">3</div>
</div>
<div class="side">
<div class="cube-image">4</div>
</div>
<div class="side">
<div class="cube-image">5</div>
</div>
<div class="side">
<div class="cube-image active">6</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
Added the CSS from the provided website into a separate file and imported it:
import './ProductPage.css';
(see link above for css. The CSS is just copy pasted).
Successfully rendered the cube using another component:
class NewProductPage extends Component {
constructor(props) {
super(props);
this.state = {
img: null,
};
this.onDrop = this.onDrop.bind(this);
}
onDrop(acceptedFiles){
this.setState({
img: acceptedFiles[0].preview,
})
}
render(){
return (
<div>
<Cube />
<div className="DropPicBox">
<DropZone onDrop={this.onDrop}>
{this.state.img ?
<div>
<img className="PicBox" src={this.state.img} />
</div>
: null}
</DropZone>
</div>
</div>
);
}
}
The rendering seems to be incorrect as seen here:
https://i.sstatic.net/dFvTM.jpg
My query pertains to the behavior of react when applying CSS that may alter the appearance of the cube. To exemplify, I used jsfiddle to model a similar cube using HTML and CSS obtained from this site: JSFiddle Cube Example
The rendition of the cube appeared accurately in the JSFiddle example: