css3骰子(transform初识)_html/css_WEB-ITnose
程序员文章站
2022-04-28 18:02:28
...
利用css3制作可旋转的骰子,效果图如下,也可以查看 demo:
首先是骰子的html结构,.page 是骰子的六个页面的 class,#one-#six分别表示六个面,.point 是骰子表面的点数:
...
接着是控制骰子旋转方向和度数的控制器:
X 方向:0度...
通过css设置骰子各个面的位置,
首先设置 3d 场景:-webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; 场景离显示器距离 800,观察位置在显示器中间,
再设置 transform-style 转换类型为 3d 转换,
然后通过 position 来设置各个表面以及表面上点的位置,
最后用 transform-origin 给各个表面设置旋转轴的位置,和用 rotateX、rotateY、rotateZ 设置旋转角度:
#diceWapper{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; } #dice{ position: relative; -webkit-transform-style:preserve-3d; } .page{ -webkit-transition: -webkit-transform 1s linear; position:absolute; } #two { -webkit-transform-origin:right; -webkit-transform: rotateY(-90deg); } ...
最后就是通过 input:range 的 change 事件来控制不同方向的旋转角度,获取三个 range 的 value 来设置 #dice 的 webkitTransform 实现转动。
完整代码如下(可运行):
css3骰子 X 方向:0度Y 方向:0度Z 方向:0度
推荐阅读
-
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
CSS3之圆角_html/css_WEB-ITnose
-
css3中的content和实体_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
CSS3之弹性布局_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
css3过度效果_html/css_WEB-ITnose