如何解决CSS 3D多维数据集和CSS转换
这是我的css / html代码
* {
margin:0px;
padding:0px;
}
.cube {
position:relative;
width:500px;
height:60px;
margin:5rem auto;
-webkit-transform-style:preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective:400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
/* positions */
.a,.b,.c,.d {
position:absolute;
width:50%;
height:100%;
left:0px;
z-index:222;
}
.a:before,.b:before,.c:before,.d:before,.a:after,.b:after {
content:'';
position:absolute;
top:0px;
left:0px;
width:500px;
height:60px;
}
.a:before,.d:before {
z-index:111;
}
.a:after,.b:after {
z-index:333;
}
.b {
top:0px;
-webkit-transform:rotateX(75deg) translateY(-60px);
-moz-transform: rotateX(75deg) translateY(-60px);
-o-transform: rotateX(75deg) translateY(-60px);
-ms-transform: rotateX(75deg) translateY(-60px);
transform: rotateX(75deg) translateY(-60px);
-webkit-transform-origin:0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.c {
top:0px;
-webkit-transform:rotateX(75deg);
-moz-transform: rotateX(75deg);
-o-transform: rotateX(75deg);
-ms-transform: rotateX(75deg);
transform: rotateX(75deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.d {
-webkit-transform:translateZ(-60px) translateY(-15px);
-moz-transform: translateZ(-60px) translateY(-15px);
-o-transform: translateZ(-60px) translateY(-15px);
-ms-transform: translateZ(-60px) translateY(-15px);
transform: translateZ(-60px) translateY(-15px);
}
/* colors */
.a,.b {
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(116,198,43,0.8)),to(rgba(116,0.8)));
background-image: -webkit-linear-gradient(top,rgba(116,0.8),0.8));
background-image: -moz-linear-gradient(top,0.8));
background-image: -o-linear-gradient(top,0.8));
background-image: linear-gradient(to bottom,0.8));
background-repeat:no-repeat;
background-size:100% 100%;
background-position:0% 0%;
}
.c,.d {
background-image:-webkit-gradient(linear,0.5)),0.5)));
background-image:-webkit-linear-gradient(top,0.5),0.5));
background-image: -moz-linear-gradient(top,0.5));
background-image: -o-linear-gradient(top,0.5));
background-image: linear-gradient(to bottom,0.5));
background-repeat:no-repeat;
background-size:100% 100%;
background-position:0% 0%;
}
.c:before {
-webkit-box-shadow:0px 30px 20px -20px rgba(0,0.4),0px 40px 15px -15px rgba(0,0.25);
-moz-box-shadow: 0px 30px 20px -20px rgba(0,0.25);
box-shadow: 0px 30px 20px -20px rgba(0,0.25);
}
.a:before,.d:before {
background-color:rgba(0,0.05);
}
.a:after {
background-image:-webkit-gradient(linear,from(rgba(0,0.07)),to(rgba(0,0)));
background-image:-webkit-linear-gradient(top,rgba(0,0.07),0));
background-image: -moz-linear-gradient(top,0));
background-image: -o-linear-gradient(top,0));
background-image: linear-gradient(to bottom,0));
}
.b:after {
background-image:-webkit-gradient(linear,from(rgba(255,255,0.1)),to(rgba(255,0.25)));
background-image:-webkit-linear-gradient(top,rgba(255,0.1),0.25));
background-image: -moz-linear-gradient(top,0.25));
background-image: -o-linear-gradient(top,0.25));
background-image: linear-gradient(to bottom,0.25));
}
<section id="content">
<div class="cube">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
</section>
.a.b.c.d的宽度百分比取决于我页面中的变量。 问题是百分比较低,例如为2-多维数据集的左侧部分不现实。看看下面的例子。
* {
margin:0px;
padding:0px;
}
.cube {
position:relative;
width:500px;
height:60px;
margin:5rem auto;
-webkit-transform-style:preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective:400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
/* positions */
.a,.d {
position:absolute;
width:2%;
height:100%;
left:0px;
z-index:222;
}
.a:before,0.25));
}
<section id="">
<div class="cube">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div id="slider-range-min"></div>
</div>
</section>
我想添加立方体的“绿色左侧”,是伪的:after元素还是其他方式,而不是显示“空”
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。