好看的立体正方形标题

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box{margin:100px auto;height:500px;width:500px;/* border:1px solid #000;*//* 配置3d环境*/transform-style:preserve-3d;transform: rotateX(10deg) rotateY(10deg);}.box div{height:400px;width:400px;position:absolute;left:0;top:0;/*opacity:.9;*/}.box .top{background-color:#ff9c23;transform:rotateX(90deg) translateZ(-200px);}.box .bottom{background-color:green;transform:rotateX(90deg) translateZ(200px);}.box .left{background-color:#5cadff;transform:rotateY(90deg) translateZ(200px);}.box .right{background-color:red;transform:rotateY(90deg) translateZ(-200px);}.box .before{background-color:pink;transform:translateZ(200px);}.box .after{background-color:yellow;transform:translateZ(-200px);}table{border-top: #CCCCCC solid 7px;border-left: #CCCCCC solid 7px;border-right: #F0AD4E solid 7px;border-bottom: #F0AD4E solid 7px;}td{border-top: #CCCCCC  solid 10px;border-left: #CCCCCC solid 10px;border-right: #F3F3F3 solid 10px;border-bottom:  #F3F3F3 solid 10px;}</style></head><body><div class="box"> <div class="top"></div><div class="bottom"></div> <div class="left"></div><div class="right"></div> <div class="before"><p align="center" style="font-size: 92px;padding-top: 60px;">贰</p></div><div class="after"></div> </div>  </body></html>

好看的立体正方形标题相关推荐

web 3d旋转立体正方形
transform动画 3D旋转立体正方形在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画 <!DOCTYPE htm ...
CSS3 transform动画 3D旋转立体正方形
CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画 <!DOCTYP ...
css实现立体正方形旋转效果
今天呢,用一段简单的代码来实现一个非常炫酷的立方体旋转的案例,主要使用的代码是css的动画以及3d的位移.旋转等属性.具体代码如下: 以上就是使用css代码实现一个3D立体正方形旋转的案例,希望能帮助 ...
OPENGL学习项目--立体正方形的实时三维模型
实现一个能够跟随鼠标切换视角,进行动态消隐的正方体,能够帮助更好的实现立体三维几何在二维当中的实现. 系统主要涉及在二维平面中三维图形的绘制.图形的旋转.图形的平移.图形的缩放和图形的消隐算法. 1. ...
微信小程序 - 3D 立体正方形展示控制（水平、垂直、多维拖动）
前言如果您想获得源码,请滑动到最底部下载示例(与下图效果一致),代码干净整洁. 该示例支持自定义 3D 正方体每一面内容,显示什么由您插槽(Slot)决定, 另外,支持水平.垂直.多维度三种拖动 ...
HTML5输出字母围成的正方形,通过CSS生成的立体正方形
CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; margin: 0; } html { font-size: 10px; back ...
html5+css3立体正方形效果案例
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>& ...
BufferGeometry(立体正方形案例，由三角形片组成)
1.BufferGeometry是自由度最高的geometry类型,可以自由指定每个顶点的位置.颜色.法线(影响光照). 进一步理解Buffer,就是将顶点位置数组.顶点颜色数组等放在一个缓存区中,加 ...
CSS制作旋转立体正方形
<div class="stage"><div class="container"><div class="side f ...

好看的立体正方形标题

好看的立体正方形标题相关推荐

最新文章

热门文章