css3画立体图形

一，效果

二，代码

<template> <div id="app"> <div> <div class="yuanzhui"> <div></div> </div> </div> <div class="cube"> <div class="side front"></div> <div class="side back"></div> <div class="side right"></div> <div class="side left"></div> <div class="side top"></div> </div> <div class="cube2"> <div class="side front"></div> <div class="side back"></div> <div class="side right"></div> <div class="side left"></div> <div class="side top"></div> </div> </div> </template> <script> export default { 
    name: "App", components: { 
   }, data() { 
    return { 
   }; }, methods: { 
   }, }; </script> <style scoped lang="scss"> .yuanzhui { 
    margin: auto; position: relative; width: 200px; height: 300px; // background: red; &::before { 
    position: absolute; content: ""; left: 0px; width: 0; height: 0; border-bottom: 120px solid rgba(255, 103, 116, 0.8); border-left: 100px solid transparent; border-top: 170px solid transparent; transform: skewY(10deg); filter: drop-shadow(3px 3px 5px rgba(241, 198, 241, 0.5)); } &:after { 
    position: absolute; content: ""; right: 0px; width: 0; height: 0; border-bottom: 120px solid rgba(255, 103, 116, 0.8); border-right: 100px solid transparent; border-top: 170px solid transparent; transform: skewY(-10deg); filter: drop-shadow(6px 6px 5px rgba(241, 198, 241, 0.5)); } div { 
    position: absolute; bottom: 2px; left: 98px; width: 4px; height: 120px; background: #fff; z-index: 9; opacity: 0.3; box-shadow: 0px -2px 4px 1px #fff; } } .cube { 
    position: relative; top: 30px; width: 400px; height: 5px; // background: red; margin: auto; transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(45deg); transform-origin: center; height: 2px; .side { 
    position: absolute; width: 200px; height: 200px; background: transparent; // border: 1px solid rgba(0, 0, 0, 0.5); color: white; } .front { 
    transform-origin: top; transform: translateZ(100px) rotateX(30deg); width: 200px; height: 0; border-bottom: 200px solid rgba(247, 67, 226, 0.8); border-left: 100px solid transparent; border-right: 100px solid transparent; filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); } .top { 
    transform: rotateX(90deg) translateZ(100px) translateX(100px); background: rgba(247, 67, 226, 0.8); } .left { 
    transform-origin: top; transform: translateX(-100px) rotateY(-90deg) rotateX(30deg); width: 200px; height: 0; border-bottom: 200px solid rgba(247, 67, 226, 0.8); border-top: 0 solid transparent; border-left: 100px solid transparent; border-right: 100px solid transparent; filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); } .right { 
    transform-origin: top; transform: translateX(100px) rotateY(90deg) rotateX(30deg); width: 200px; height: 0; border-bottom: 200px solid rgba(247, 67, 226, 0.8); border-top: 0 solid transparent; border-left: 100px solid transparent; border-right: 100px solid transparent; filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); } .back { 
    transform-origin: top; transform: translateZ(-100px) rotateX(-30deg); width: 200px; height: 0; border-bottom: 200px solid rgba(247, 67, 226, 0.8); border-top: 0 solid transparent; border-left: 100px solid transparent; border-right: 100px solid transparent; filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); } } .cube2 { 
    position: relative; top: 300px; width: 800px; height: 5px; margin: auto; transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(45deg); transform-origin: center; .side { 
    position: absolute; width: 400px; height: 400px; background: transparent; // border: 1px solid rgba(0, 0, 0, 0.5); color: white; } .front { 
    transform-origin: top; transform: translateZ(200px) rotateX(30deg); width: 400px; height: 0; border-bottom: 400px solid rgba(30, 119, 252, 0.8); border-left: 200px solid transparent; border-right: 200px solid transparent; filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); } .top { 
    transform: rotateX(90deg) translateZ(100px) translateX(200px); background: rgba(15, 89, 201, 0.8); } .left { 
    transform-origin: top; transform: translateX(-200px) rotateY(-90deg) rotateX(30deg); width: 400px; height: 0; border-bottom: 400px solid rgba(30, 119, 252, 0.8); border-top: 0 solid transparent; border-left: 200px solid transparent; border-right: 200px solid transparent; filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); } .right { 
    transform-origin: top; transform: translateX(200px) rotateY(90deg) rotateX(30deg); width: 400px; height: 0; border-bottom: 400px solid rgba(30, 119, 252, 0.8); border-top: 0 solid transparent; border-left: 200px solid transparent; border-right: 200px solid transparent; filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); } .back { 
    transform-origin: top; transform: translateZ(-200px) rotateX(-30deg); width: 400px; height: 0; border-bottom: 400px solid rgba(30, 119, 252, 0.8); border-top: 0 solid transparent; border-left: 200px solid transparent; border-right: 200px solid transparent; filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5)); } } </style> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/10957.html