以 3d 视角翻转圆圈
Flip circle with 3d perspective
我有3个圈子
一个用于前视图(感叹号 - 绿色)
一个用于支持正面和背面的视图(圆圈 - 红色)
一个用于后视图(停止-返回)
这是一个小片段
https://jsfiddle.net/modo9grp/
我已经倾斜了整个东西来展示我需要的东西,但最后我将只使用 rotateY。
所以这就是我想要创建的,我再次夸大了一点透视,但是绿色需要在上面,红色在中间,蓝色在后面。
期待结果,当我使用 rotateY 时,整个圆应该翻转并且蓝色圆必须完全可见,当 rotateY 达到 180 度时。
还有一个好处,我想给它加一点厚度,所以我不知道我是否必须添加 2 个红色圆圈,一个用于正面,另一个用于蓝色。
你怎么看?
<div class='rewardIcon'>
<div class='contIcon'>
<span class='fa fa-stop-circle'></span>
</div>
<div class='contIcon'>
<span class='fa fa-circle'></span>
</div>
<div class='contIcon'>
<span class='fa fa-exclamation-circle'></span>
</div>
</div>
.rewardIcon{
position:absolute;
transform: rotateX(50deg) rotateY(140deg);
transform-style: preserve-3d;
left:200px
}
.contIcon{
position:absolute;
font-size:160px;
transform-style: preserve-3d;
}
.fa-stop-circle{
color:blue;
}
.fa-circle{
color:red;
}
.fa-exclamation-circle{
color:green;
}
这是更新
https://jsfiddle.net/modo9grp/2/
但是如果有人知道如何在圆圈周围制作边框,请不要犹豫。
谢谢
我必须添加
transform-origin: center center; /*on the main container*/
transform: translateX(-50%);/*on the icon container*/
transform:translateZ(1px);/*on the icons*/
我有3个圈子 一个用于前视图(感叹号 - 绿色) 一个用于支持正面和背面的视图(圆圈 - 红色) 一个用于后视图(停止-返回)
这是一个小片段 https://jsfiddle.net/modo9grp/
我已经倾斜了整个东西来展示我需要的东西,但最后我将只使用 rotateY。 所以这就是我想要创建的,我再次夸大了一点透视,但是绿色需要在上面,红色在中间,蓝色在后面。
期待结果,当我使用 rotateY 时,整个圆应该翻转并且蓝色圆必须完全可见,当 rotateY 达到 180 度时。
还有一个好处,我想给它加一点厚度,所以我不知道我是否必须添加 2 个红色圆圈,一个用于正面,另一个用于蓝色。
你怎么看?
<div class='rewardIcon'>
<div class='contIcon'>
<span class='fa fa-stop-circle'></span>
</div>
<div class='contIcon'>
<span class='fa fa-circle'></span>
</div>
<div class='contIcon'>
<span class='fa fa-exclamation-circle'></span>
</div>
</div>
.rewardIcon{
position:absolute;
transform: rotateX(50deg) rotateY(140deg);
transform-style: preserve-3d;
left:200px
}
.contIcon{
position:absolute;
font-size:160px;
transform-style: preserve-3d;
}
.fa-stop-circle{
color:blue;
}
.fa-circle{
color:red;
}
.fa-exclamation-circle{
color:green;
}
这是更新
https://jsfiddle.net/modo9grp/2/
但是如果有人知道如何在圆圈周围制作边框,请不要犹豫。
谢谢
我必须添加
transform-origin: center center; /*on the main container*/
transform: translateX(-50%);/*on the icon container*/
transform:translateZ(1px);/*on the icons*/