3D Logo Design code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Logo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="logo"></div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: yellow; } .logo { position: absolute; top: 20%; left: 60%; width: 300px; height: 200px; background: url(logo.png); background-size: 100%; transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(-50%,-50%); box-shadow: -80px 80px 80px rgba(0,0,0,0.5); } .logo::before { content: ''; position: absolute; top: 13px; left: -25px; width: 25px; height: 100%; background: rgb(99,8,8); transform: rotate(0deg) skewY(-45deg); } .logo::after { content: ''; position: absolute; bottom: -25px; left: -13px; width: 100%; height: 25px; background: rgb(39,1,1); transform: rotate(0deg) skewX(-45deg); }
