看到一个帖子做了一个旋转魔方, 想着试着学习练练手.
看着高手的代码按照自己的思路, 码了一下, 记下遇到的一些问题.
html 代码片段
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>
- 3D 魔方 Rubik's Cube
- </title>
- <style>
- * { margin: 0; padding: 0; } /*radial-gradient(ellipse 100px 50px at 30%
- 20%,#adbf41 ,#328a26) radial-gradient(circle 100px at 30% 20%,#adbf41 ,#328a26)*/
- HTML { height: 100%; /*background: radial-gradient(#adbf41, #328a26);*/
- } .stage { width: 20em; height: 20em; position: absolute; top: 0; left:
- 0; right: 0; bottom: 0; margin: auto; perspective: 1000px; -webkit-perspective:
- 1000px; perspective: 1000px; } .cube * { position: absolute; width: 100%;
- height: 100%; box-shadow: 0 0 5em rgba(255, 255, 255, 0.4); background:
- -webkit-linear-gradient(left, rgba(85, 85, 85, 1) 0px, rgba(85, 85, 85,
- 1) 3px,rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(85, 85,
- 85, 1) 0px, rgba(85, 85, 85, 1) 3px, rgba(0, 0, 0, 0) 0px); background-size:
- 2.5em 2.5em; border: 2px solid rgba(85, 85, 85, 1); border-top:none; border-left:none;
- border-radius: 0.2em; } .font { background-color: rgba(255, 255, 255, 1);
- transform: translateZ(10em); } .back { background-color: rgba(255, 213,
- 0, 1); transform: rotateX(180deg) translateZ(10em); } .left { background-color:
- rgba(0, 70, 173, 1); transform: rotateY(-90deg) translateZ(10em); } .right
- { background-color: rgba(0, 155, 72, 1); transform: rotateY(90deg) translateZ(10em);
- } .top { background-color: rgba(183, 18, 52, 1); transform: rotateX(90deg)
- translateZ(10em); } .bottom { background-color: rgba(255, 88, 0, 1); transform:
- rotateX(-90deg) translateZ(10em); } .cube { position: absolute; width:
- 100%; height: 100%; -o-animation: spin linear 6s infinite, bigchange linear
- 6s; animation: spin linear 6s infinite, bigchange linear 6s; -moz-transform-style:
- preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;
- -webkit-transform-style: preserve-3d;/* 使被转换的子元素保留其 3D 转换:*/ } @-webkit-keyframes
- spin { 0% { -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
- -ms-transform: translateZ(-10em) rotateX(0) rotateY(0deg); -o-transform:
- translateZ(-10em) rotateX(0) rotateY(0deg); transform: translateZ(-10em)
- rotateX(0) rotateY(0deg); } 100% { -webkit-transform: translateZ(-10em)
- rotateX(360deg) rotateY(360deg); -ms-transform: translateZ(-10em) rotateX(360deg)
- rotateY(360deg); -o-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
- transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); } } @-webkit-keyframes
- bigchange { 0% { width: 0em; height: 0em; } 100% { width: 20em; height:
- 20em; } }
- </style>
- </head>
- <body>
- <div class="stage">
- <div class="cube">
- <div class="font">
- </div>
- <div class="back">
- </div>
- <div class="left">
- </div>
- <div class="right">
- </div>
- <div class="top">
- </div>
- <div class="bottom">
- </div>
- </div>
- </div>
- </body>
- </HTML>
1. 分析整个页面的结构
首先需要一个放正方体的 div 命名为 stage,
接下来是主体元素 cube,
cube 由前后左右上下, 留个面组成, 因此在 cube 中有 6 个 div("font"/"back"/"left"/"right"/"top"/"bottom")
这样页面结构就好了.
HTML 代码片段
<div class="stage"> <div class="cube"> <div class="font"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> </div> </div>
2. 底部的径向渐变背景
这里用到 CSS3 的径向渐变属性 radial-gradient
详细参考了
文章写得很详细, 对每种引擎的写法都详细地写了
目前自己理解后觉得
只设定开始和结束颜色足以
CSS 代码片段
HTML { height: 100%; background: radial-gradient(#adbf41, #328a26); }
可能以后会用到的两种使用参数的方法
radial-gradient(ellipse 100px 50px at 30% 20%,#adbf41 ,#328a26) radial-gradient(circle 100px at 30% 20%,#adbf41 ,#328a26)
ellipse 就是渐变扩散的方式是椭圆, 默认是椭圆, circle 则是以圆形的方式扩散,
at 是设置扩散的中心点, 默认在最中心的位置, 值可以使百分比, 像素等长度单位
后两个参数就是开始和结束严肃
3. 通过旋转和移动形成正方体
由 font 沿着 x 轴或 Y 轴旋转 ( rotateX(90deg) rotateY(90deg) )
接着用 translateZ(10em);z 轴方向移动半个正方体长度
font 和 back 沿着 Z 方向移动 10em
在这里我存在一个理解误差,
很奇怪为什么 6 个面都是沿着正的 Z 轴方向移动呢? 按照我已屏幕为参考系, 应该是分别向 XYZ 轴的正反 6 个方向移动才对
找了一下没发现讲解的地方, 我觉得, 应该是旋转的时候 Z 轴的方向改变了, 所以
CSS3 的 3D 方向的参照物是自己, 而不是屏幕.
4. 通过线性渐变 inear-gradient 画魔方的方形背景
inear-gradient 的详细介绍
在这里用到第 7 点: 渐变上应用透明度 (Transparency)
background: -webkit-linear-gradient(left, rgba(85, 85, 85, 1) 0px, rgba(85, 85, 85, 1) 3px, rgba(85, 85, 85, 0) 0px), / 左边 / -webkit-linear-gradient(top, rgba(85, 85, 85, 1) 0px, rgba(85, 85, 85, 1) 3px, rgba(85, 85, 85, 0) 0px); / 上边 / background-size: 2.5em 2.5em; background-color: rgba(255, 255, 255, 1);(背景颜色)
先利用线性渐变画出, 左边和上边的两条边线,
自动 repeat 后变成
接着再设置右边边框
border: 2px solid rgba(85, 85, 85, 1); border-top:none; border-left:none;
5. 旋转动画
所有的动画实际都添加到 cube 上, 子元素就随着父元素, 就是很简单的旋转动画
这里主要有一个属性: transform-style
transform-style: preserve-3d; -webkit-transform-style: preserve-3d;/ 使被转换的子元素保留其 3D 转换:/
来源: http://www.qdfuns.com/article/17942/55bd38d67403a143e871588f061cb352.html