CSS制作旋转立体正方形

<div class="stage"><div class="container"><div class="side front">前面</div><div class="side back">背面</div><div class="side left">左面</div><div class="side right">右面</div><div class="side top">顶面</div><div class="side bottom">底面</div></div>
</div>

@keyframes spin {0%{transform:rotateY(0deg);}100%{transform: rotateY(360deg);}
}
.stage{perspective: 300px;width: 300px;height: 300px;margin: 100px auto;position: relative;
}
.container{transform-style: preserve-3d;
}
.container:hover{animation: spin 5s linear infinite;
}
.side{background: rgba(255,0,0,0.3);border: 1px solid red;font-size: 60px;font-weight: bold;height: 196px;line-height:196px;width: 196px;position: absolute;text-shadow: 0 -1px 0 rgba(0,0,0,0.2);text-transform: uppercase;}
.front{transform: translateZ(100px);
}
.back{transform: rotateX(180deg)translateZ(100px);
}
.left{transform: rotateY(-90deg) translateZ(100px);
}
.right{transform: rotateY(90deg) translateZ(100px);
}
.top{transform: rotateX(90deg) translateZ(100px);
}
.bottom{transform: rotateX(-90deg) translateZ(100px);
}

CSS制作旋转立体正方形相关推荐

HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
web 3d旋转立体正方形
transform动画 3D旋转立体正方形在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画 <!DOCTYPE htm ...
CSS3 transform动画 3D旋转立体正方形
CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画 <!DOCTYP ...
css制作3D立体旋转效果
通过纯css制作出3D旋转效果,以展示中国部分知名公司为例: 浏览器实现结果: 6个名片都具有两面,一面图片,一面文字,当鼠标放在图片上时,就会3D旋转成文字的一面. 代码: <!DOCTYPE ...
HTML5输出字母围成的正方形,通过CSS生成的立体正方形
CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; margin: 0; } html { font-size: 10px; back ...
如何利用css制作旋转魔方
<!DOCTYPE html> <html><head><meta charset="utf-8" /><style>/ ...
从零开始制作【立体键盘】，画UI免写CSS，【盲打练习】的交互逻辑只用了10来行表达式
手把手教你从空白页面开始通过拖拉拽可视化的方式制作[立体键盘]的静态页面,不用手写一行CSS代码,全程只用10来行表达式就完成了[盲打练习]的交互逻辑. 整个过程在众触应用平台进行,快速直观. 最终U ...
css实现立体正方形旋转效果
今天呢,用一段简单的代码来实现一个非常炫酷的立方体旋转的案例,主要使用的代码是css的动画以及3d的位移.旋转等属性.具体代码如下: 以上就是使用css代码实现一个3D立体正方形旋转的案例,希望能帮助 ...
ai如何旋转画布_「AI教程」使用AI制作3D立体文字效果
今天macdown小编要通过AI制作一种3D立体字体,主要的知识点是混合工具的使用.Shift键.Alt键的灵活运用.3D旋转命令.投影效果的创建等,学会后可以应用在需要的设计中,比如海报设计,log ...

CSS制作旋转立体正方形

CSS制作旋转立体正方形相关推荐

最新文章

热门文章