我正在尝试制作一个 CSS四面体,所以我通过做一些CSS3三角形并使用perspective属性激活3D变换来解决这个问题。
但是我有一些问题要考虑所有转换,这里是我的一些代码:
.navbar-brand-logo {
width: 64px;
height: 64px;
transform-style: preserve-3d;
perspective: 600px;
position: relative;
}
.face {
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 64px 32px 0 32px;
transform-origin: 0 0;
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}
.logo-base-left {
transform: rotateX(180deg) translateY(-64px);
}
.logo-base-right {
transform: rotateY(180deg) rotateX(180deg) translateY(-64px);
}
.logo-up {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
transform: rotateY(180deg) scaleY(0.5) translateY(-64px);
}
.logo-down-up {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
border-width: 64px 0 0px 4px;
transform: scaleX(128px) translateZ(0px);
}

<section class="navbar-brand-logo">
<figure class="face logo-base-left"></figure>
<figure class="face logo-base-right"></figure>
<figure class="face logo-up"></figure>
<figure class="face logo-down-up"></figure>
</section>
&#13;
我有问题想象如何制作另外两张脸(左上角和右上角)。
这是一个CodePen,用于说明当前的尝试:
此外,使用CSS3四面体作为徽标是一个好主意吗? 如果它是一个SVG会更好吗?
由于浏览器的支持,WebGL / Canvas是禁忌的。
答案 0 :(得分:3)
以下是介绍制作响应式四面体的方法的几个步骤:demo - responsive tetrahedron。
tetrahedron有4个三角形面。每张脸都是equilateral triangle。 在下面的示例中,我使用clip-path property来制作4个等边三角形:
.tetra{
position:relative;
width:20%;
padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
margin:0 auto;
}
.tetra div{
position:absolute;
top:0;left:0;
width:100%; height:100%;
-webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
clip-path:polygon(50% 0, 100% 100%, 0% 100%);
background:teal;
}
.tetra .face2{
transform-origin:0% 100%;
transform:rotate(-60deg);
background:gold;
}
.tetra .face3{
transform-origin:100% 100%;
transform:rotate(60deg);
background:darkorange;
}
.tetra .face4{
transform-origin:50% 100%;
transform:rotate(180deg);
background:pink;
}
&#13;
<div class="tetra">
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</div>
&#13;
为此,您需要使用perspective和transform-style在3d环境中单独旋转每个面:
body{
perspective:9000px;
}
.tetra{
position:relative;
width:20%;
padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
margin:0 auto;
transform-style:preserve-3d;
}
.tetra div{
position:absolute;
top:0;left:0;
width:100%; height:100%;
-webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
clip-path:polygon(50% 0, 100% 100%, 0% 100%);
background:teal;
transform-style:preserve-3d;
}
.tetra .face2{
transform-origin:0% 100%;
transform:rotate(-60deg) rotatex(-109.5deg);
background:gold;
}
.tetra .face3{
transform-origin:100% 100%;
transform:rotate(60deg) rotatex(-109.5deg);
background:darkorange;
}
.tetra .face4{
transform-origin:50% 100%;
transform:rotate(180deg) rotatex(-109.5deg);
background:pink;
}
&#13;
<div class="tetra">
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</div>
&#13;
此时,您有一个四面体,但只能看到3个面,以便看到整个3d形状:
顶部看到整个四面体,您需要使用过渡或关键帧动画旋转它:
body{
perspective:9000px;
padding-top:10%;
}
.tetra{
position:relative;
width:20%;
padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
margin:0 auto;
transform-style:preserve-3d;
transform:rotatex(90deg) rotateY(0deg) rotatez(0deg);
animation: rotate 10s linear infinite;
}
.tetra div{
position:absolute;
top:0;left:0;
width:100%; height:100%;
-webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
clip-path:polygon(50% 0, 100% 100%, 0% 100%);
background:teal;
transform-style:preserve-3d;
}
.tetra .face2{
transform-origin:0% 100%;
transform:rotate(-60deg) rotatex(-109.5deg);
background:gold;
}
.tetra .face3{
transform-origin:100% 100%;
transform:rotate(60deg) rotatex(-109.5deg);
background:darkorange;
}
.tetra .face4{
transform-origin:50% 100%;
transform:rotate(180deg) rotatex(-109.5deg);
background:pink;
}
@keyframes rotate{
50%{transform:rotatex(100deg) rotateY(10deg) rotatez(180deg);}
100%{transform:rotatex(90deg) rotateY(0deg) rotatez(360deg);}
}
&#13;
<div class="tetra">
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</div>
&#13;
请注意,这会使用并非所有浏览器都支持的属性,特别是只有chrome支持的剪辑路径。此属性用于制作等边三角形,您可以使用其他方法(see here)。
对于浏览器支持和供应商前缀,另请参阅canIuse:
答案 1 :(得分:2)
如果你想为徽标设置动画(一次,悬停,没关系),那么使用3D CSS可能是一个好主意。
借助SVG,您可以获得更好的浏览器支持,更快的渲染速度以及更轻松的形状控制,因此,如果您没有为徽标设置动画,我建议您使用SVG。
为了在3D中构建四面体的形状,请查看Ana Tudor的编码器,这只是她制作的许多四面体示例中的一个:http://codepen.io/thebabydino/pen/vFrHx - 您可以使用动画在此笔中rot
了解如何旋转/动画它。
答案 2 :(得分:1)
在有机分子中,四面体通常是相关的螺旋,例如: Boerdijk–Coxeter螺旋。因此,编写代码来显示此螺旋结构将很不错。 这是螺旋线的javascript:
var s set equal to the sides of the square canvas
var a=s/6, b=s/9;
c.beginPath();
for (var i=0; i<2*Math.PI; i+=0.01){
x=s/4+a*Math.cos(i)-b*Math.sin(i);
y=3*s/4+a*Math.cos(i)+b*Math.sin(i);
if(i==0) {c.moveTo(x,y);} else {c.lineTo(x,y);}
}
c.lineWidth=1;
c.strokeStyle="#0f6";
c.stroke();