gpt4 book ai didi

html - 仅使用 CSS 渐变创建立方体

转载 作者:太空宇宙 更新时间:2023-11-04 16:19:34 24 4
gpt4 key购买 nike

我尝试了多种方法,使用线性渐变来创建多个相互叠加的条纹,并且效果非常接近,但似乎卡在了顶面上。我正在尝试使用线性或径向渐变来完成此操作,以便我最终可以将它们升级为重复渐变并拥有漂亮的立方体背景。我正在将 css 应用于一个空的 body 标签。我认为这实际上可能是不可能的,请有人证明我错了!这是我想要的观点:

 / \
|\ /|
| | |
\ /

最佳答案

我使用了 beforeafter 伪元素来获得 3D 立方体效果。这是代码:

<!doctype html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
margin: 20px;
background: red;
}
div::before {
display: block;
content: '';
position: absolute;
width: 71px;
height: 102px;
background: green;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-45deg) translateX(-24px) translateY(96px) skewY(45deg);
}
div::after {
display: block;
content: '';
position: absolute;
width: 72px;
height: 100px;
background: blue;
-webkit-transform: rotateX(0) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(36px) skewY(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

关于html - 仅使用 CSS 渐变创建立方体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30283296/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com