Open zdddrszj opened 8 years ago
今天我们一起来学习一下如何用 css3 变换实现小时候玩的小魔方立方体。但是要提前复习一下 3D 变换的相关知识,你可以看一下 w3cplus博客 或者 w3school文档,由于目前 webkit 内核对 css3 属性兼容性比较好,为代码简洁,这里我们只考虑 chrome 浏览器,其他浏览器读者可自行加相应前缀来实现。
好了,准备就绪之后那我们就开始进入正题吧。首先,我们来看一道数学题:请想一下6个正方形如何摆放能拼成一个正方体呢?当然,方式有很多,这里只提出一种,如下:
正方体 前后 左右 上下 分别用 front back left right top bottom 来表示。
前后
左右
上下
front
back
left
right
top
bottom
我们用自定义标签来实现,html 代码如下:
<body> <cube> <front></front> <back></back> <left></left> <right></right> <top></top> <bottom></bottom> </cube> </body>
这里,给背景一个紫色到黑色的径向渐变,样式如下:
html{ background:radial-gradient(ellipse at center,#430d6d 0%,#000 100%); height:100%; }
设置正方体在浏览器窗口正中间,若想看到变换后的 3D 效果,需要给 cube 声明 3D 变换 transform-style:preserve-3d; ,同时给 body 设置 视差 ,样式如下:
cube
transform-style:preserve-3d;
body
视差
body{ padding:0; margin:0; height:100%; /*设置视差*/ perspective:1000px; } cube{ width:20em; height:20em; /*在窗口居中*/ position:absolute;left:0;top:0;right:0;bottom:0;margin:auto; /*声明 3D 变换*/ transform-style:preserve-3d; }
注意:cube 是正方体的父标签,6个子元素构成正方体,我们以父元素为相对坐标,分别对6个正方形相对父元素设置绝对定位。
这时,6个正方形和父元素重合,接下来,分别对其定位到上边图片对应位置,即 back left right top bottom 分别相对 front 进行位移和旋转,这样就可以拼成正方体啦~~~ 样式如下:
front{ left:0px; top:0px; transform:translateZ(10em); } back{ top:0px; left:0px; transform:translateZ(-10em); } left{ left:-20em; top:0px; transform: translateZ(10em) rotateY(-90deg); transform-origin:right; } right{ right:-20em; top:0px; transform:translateZ(10em) rotateY(90deg); transform-origin:left; } top{ left:0px; top:-20em; transform:translateZ(10em) rotateX(90deg); transform-origin:bottom; } bottom{ left:0px; bottom:-20em; transform:translateZ(10em) rotateX(-90deg); transform-origin:top; }
注意:看到这里,大家可能不明白为什么上面的 transform 都要加一个 transform:translateZ(10em) ,这时因为接下来我们要给 cube 加旋转动画,cube 就会以自身中心为旋转点(对应正方体 front 这个面为旋转点),导致 正方体 不能以自身中心为旋转点进行旋转,故而我们把构成它的这6个面分别沿 Z轴 向正方向位移 10em ,就是正方形边长一半,这样 cube 中心点和 正方体 中心点 重合。
transform
transform:translateZ(10em)
正方体
Z轴
10em
重合
到这里我们已经完成一半了,可是我们这个正方体并不是小时候玩的魔方那样,每个面还有 4x4=16 个小正方形,这里设置 8x8=64 个小正方形(20em/2.5em=8)。css3 可以为我们的背景添加渐变,若想复习一下渐变知识,也可以看一下 w3cplus博客。样式如下:
4x4=16
8x8=64
20em/2.5em=8
cube{ background:linear-gradient(rgba(0,0,0,0) 0px,rgba(54,226,248,.5) 0px, rgba(54,226,248,.5) 3px,rgba(0,0,0,0) 3px), linear-gradient(90deg,rgba(0,0,0,0) 0px,rgba(54,226,248,.5) 0px, rgba(54,226,248,.5) 3px,rgba(0,0,0,0) 3px); background-size:2.5em 2.5em,2.5em 2.5em; border:2px solid rgba(54,226,248,.5); box-shadow:0 0 5em rgba(0,128,0,.4); }
最后一步,为了正方体看上去不是呆板的,可以对 cube 加上一个动画,样式如下:
cube{ animation:cube 6s linear infinite; -webkit-animation:cube 6s linear infinite; } @keyframes cube{ from{transform:translateZ(-10em) rotateX(0deg) rotateY(0deg);} to{transform:translateZ(-10em) rotateX(360deg) rotateY(360deg);} } @-webkit-keyframes cube{ from{transform:translateZ(-10em) rotateX(0deg) rotateY(0deg);} to{transform:translateZ(-10em) rotateX(360deg) rotateY(360deg);} }
不知道大家对上边动画 transform:translateZ(-10em) 是否理解,这是因为我们在努力为 cube 和 正方体 中心点重合时设置了 transform:translateZ(10em) 。
transform:translateZ(-10em)
若想在正方体中添加文字,设置字体大小要注意一下,chrome 浏览器默认字体大小16px ,正方形宽度 16px*20em=320px ,故 line-height:320px ;同时给字体设置多重阴影 text-shadow,可以达到立体效果,详细如下:
16px
16px*20em=320px
line-height:320px
text-shadow
<div>放飞梦想</div>
div{ color:#fff; font-size:40px; font-weight:bold; text-align:center; line-height:320px; text-shadow:0 1px 0 #ccc,0 2px 0 #bbb,0 3px 0 #c9c9c9,0 4px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa; }
:bowtie::bowtie::bowtie: 好了,到这里就完工啦!!!
查看demo
3D 旋转立方体
今天我们一起来学习一下如何用 css3 变换实现小时候玩的小魔方立方体。但是要提前复习一下 3D 变换的相关知识,你可以看一下 w3cplus博客 或者 w3school文档,由于目前 webkit 内核对 css3 属性兼容性比较好,为代码简洁,这里我们只考虑 chrome 浏览器,其他浏览器读者可自行加相应前缀来实现。
好了,准备就绪之后那我们就开始进入正题吧。首先,我们来看一道数学题:请想一下6个正方形如何摆放能拼成一个正方体呢?当然,方式有很多,这里只提出一种,如下:
正方体
前后
左右
上下
分别用front
back
left
right
top
bottom
来表示。实现方法
我们用自定义标签来实现,html 代码如下:
这里,给背景一个紫色到黑色的径向渐变,样式如下:
设置正方体在浏览器窗口正中间,若想看到变换后的 3D 效果,需要给
cube
声明 3D 变换transform-style:preserve-3d;
,同时给body
设置视差
,样式如下:注意:
cube
是正方体的父标签,6个子元素构成正方体,我们以父元素为相对坐标,分别对6个正方形相对父元素设置绝对定位。这时,6个正方形和父元素重合,接下来,分别对其定位到上边图片对应位置,即
back
left
right
top
bottom
分别相对front
进行位移和旋转,这样就可以拼成正方体啦~~~ 样式如下:注意:看到这里,大家可能不明白为什么上面的
transform
都要加一个transform:translateZ(10em)
,这时因为接下来我们要给cube
加旋转动画,cube
就会以自身中心为旋转点(对应正方体front
这个面为旋转点),导致正方体
不能以自身中心为旋转点进行旋转,故而我们把构成它的这6个面分别沿Z轴
向正方向位移10em
,就是正方形边长一半,这样cube
中心点和正方体
中心点重合
。到这里我们已经完成一半了,可是我们这个正方体并不是小时候玩的魔方那样,每个面还有
4x4=16
个小正方形,这里设置8x8=64
个小正方形(20em/2.5em=8
)。css3 可以为我们的背景添加渐变,若想复习一下渐变知识,也可以看一下 w3cplus博客。样式如下:最后一步,为了正方体看上去不是呆板的,可以对
cube
加上一个动画,样式如下:不知道大家对上边动画
transform:translateZ(-10em)
是否理解,这是因为我们在努力为cube
和正方体
中心点重合时设置了transform:translateZ(10em)
。若想在正方体中添加文字,设置字体大小要注意一下,chrome 浏览器默认字体大小
16px
,正方形宽度16px*20em=320px
,故line-height:320px
;同时给字体设置多重阴影text-shadow
,可以达到立体效果,详细如下::bowtie::bowtie::bowtie: 好了,到这里就完工啦!!!
查看demo
Thanks