使用css3制作正六面体

效果示例图
代码块示例

效果示例图

代码块示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.hexahedron {border: 1px solid red;width: 100px;height: 100px;/*设置3d场景*/transform-style: preserve-3d;/*调整角度，使六个角度都可以被看到*/transform: rotateX(-35deg) rotateY(30deg);position: relative;margin: 200px auto;}.cube_face {background: rgba(27, 230, 189, 0.6);width: 100%;height: 100%;position: absolute;display: flex;justify-content: center;align-items: center;}.one {transform: rotateX(0deg) translateZ(100px);}.two {transform: rotateX(-90deg) translateZ(100px);}.three {transform: rotateX(90deg) translateZ(100px);}.four {transform: rotateY(-90deg) translateZ(100px);}.five {transform: rotateY(90deg) translateZ(100px);}.six {transform: rotateY(180deg) translateZ(100px);}</style></head><body><div class="hexahedron"><div class="cube_face one">1</div><div class="cube_face two">2</div><div class="cube_face three">3</div><div class="cube_face four">4</div><div class="cube_face five">5</div><div class="cube_face six">6</div></div></body>
</html>

使用css3制作正六面体相关推荐

纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
用CSS3制作很特别的波浪形菜单
用CSS3制作很特别的波浪形菜单原文:用CSS3制作很特别的波浪形菜单网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背 ...
css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
一篇文章教会你使用html+css3制作GIF图
简介:一篇文章教会你使用html+css3制作GIF图 [一.项目背景] 生活中经常会见到很多gif图,那么gif图到底是什么?GIF是一种位图.简单来说就是通过每一张张静图,通过控制它的关键帧,从而 ...
html怎样做登录页面,使用HTML 5和CSS3制作登录页面完整步骤
本文详细介绍使用HTML 5 和CSS3 制作一个登录页面的完整过程. login.html Log In Forgot your password?Register 所用到的HTML 5的特性: ◆ ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
CSS3制作文字特效
今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助.废话不说,直接进入效果的制作,感兴趣的同学跟着我的代 ...
html火影忍者网页设计作品,纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例...
本文实例讲述了纯css3制作的火影忍者中写轮眼开眼至轮回眼及进化过程实现方法.分享给大家供大家参考.具体分析如下: 今天是火影忍者(漫画)宣告完结的日子.看过火影的朋友都知道,写轮眼是什么,这里就不多 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

使用css3制作正六面体

使用css3制作正六面体

效果示例图

代码块示例

使用css3制作正六面体相关推荐

最新文章

热门文章