Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
new Vue({ el: '#app', data: function data() { return { x: 0, y: 0 }; }, methods: { coords: function coords(e) { this.x = e.clientX / 10; this.y = e.clientY / 10; } } });
CSS
body { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/tron.gif) black; background-position: cover; } #app { width: 100vw; height: 100vh; display: flex; justify-content: center; } #contain { position: relative; height: 100vh; width: 60vw; margin: 30vh 50px 50px; padding: 10px; -webkit-perspective: 200px; perspective: 200px; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .square { width: 100%; height: 100px; text-align: center; padding: 50px 0; font-size: 30px; position: absolute; } .square svg { width: 500px; height: 350px; } .square1 { -webkit-transform: translateY(0px) rotateX(45deg); transform: translateY(0px) rotateX(45deg); } .square2 { -webkit-transform: translateY(50px) rotateX(45deg); transform: translateY(50px) rotateX(45deg); } .square3 { -webkit-transform: translateY(-50px) rotateX(45deg); transform: translateY(-50px) rotateX(45deg); }
HTML
circ3
circ2
circ4
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email