• 2.旋转的骰子（1）

    1.动画——旋转的骰子

    我们想用纯html 和CSS， 做一个旋转的筛子，骰子要有立体感，每个面上要有圆点，表示点数，并且骰子可以原地旋转。

    2.分析需求——庖丁解牛

    a.立方体的每个面上有点数

    立方体面上不同数量和排布的圆点，可以使用CSS来完成，让原点有内凹的立体感。至于排布，我们可以使用先进的flex实现。

    b.骰子是个立方体

    这个筛子必须是一个货真价实的立方体才行，只有这样才能在旋转中才能没有破绽。而立方提有6个面，我们需要用六个正方形，辗转腾挪后拼接起来。立方体边缘要有一定的圆弧，而不是90度的棱角。

    c.旋转是个大麻烦

    立方体自身需要旋转，以便让立方体倾斜一定角度，同时要求保持倾斜的立方体围绕几何中心进行旋转，这需要对坐标轴和旋转有比较透彻的理解。

    3.六个面——先来解决平面问题

    在合成立方体之前，先解决平面的问题，复杂问题，先从简单的地方着手。我们先来制作6个面，这无非就是6个

    标签。每个面上的点，使用相应数量的标签（或者任意其他标签）即可代替。使用css让点呈现内凹样式，使用flex对点进行布局。

    a.六个面的逻辑划分

    html的制作的原则就是要简单明了，清晰易懂！

     b.面的基本样式

     c.布局点点——flex排兵布阵

    点的基本样式

     1个点——舍我其谁

    2个点——平分秋色

     3个点——三分天下

     4个点——纵情四海

     5个点——五子登科

     6个点——六韬三略

     最终的效果：

    4.立方体——让我想起泰国的四面佛

    立方体有6个面，前后左右上下，我们需要做六个正方形，然后通过transform属性的旋转和平移函数，来让它们处于正确的方位和方向，拼接成一个立方体。而且我们需要将元素的2D平面几何中心，作为立方体的几何中心。如图，这样的话，前后面前后移动，上下面围绕X轴旋转，上线移动，左右面围绕Y轴旋转，左右平移，就大功告成了

     a.首先需要将所有的面重合于相同区域，再进行旋转和移动

    b.凡是子元素有3D显示效果的，父元素都需要设置透视3D，否则是看不到效果的

    c.前后面移动立方体边长的1/2，同时注意，后面的面要反转180度（因为面有正反，正面要朝外）

     d.上下面围绕X轴旋转90度（注意旋转角度相反，因为面要朝外），同时沿上下平移立方体边长一半

    e.左右面围绕Y轴旋转90度（注意旋转角度相反，因为面要朝外），同时朝左右移动立方体边长一半

    f.我们可以旋转立方体，以便验证移动的正确性，可以选择性的隐藏显示其他面，或者修改面的颜色，方便查看。

    g.立方体的面设为白色，我们发现，每个面之间是有空隙的，因为我们原先想要做成圆角的边缘，这样透过空袭就可以看到立方体内部，或者页面背景，非常的糟糕，我们需要完全遮挡空袭，并且让立方体更有立体感。

    我们可以在立方体的中心增加一个上图所示的遮挡面片，遮挡面片位于立方体内部，这样无论如何都不会从缝隙看到背景了！

    h. 制作遮挡面片

     i.通过上一步骤，我们发现视线很难穿透立方体的空隙，但是立方体的内部仍然可以看到，还需要一个遮挡。我们需要在6个面的每个面下方（在立方体内部），再提供一层遮挡，并且颜色设当加深，从而有一定立体感。如图中深色的那层面片，当然，内层的面片会适当增大，否则也是无法遮挡的。这层遮挡位于作为面片子元素出现会比较好，这样，面片旋转时候，子元素也跟着旋转了。这让我们想到了伪元素。

     5.立方体旋转动画

    立方体本身，我们可以通过设置.cube的样式来进行旋转，如图。但是，如果我们想要让立方体保持这个姿势，水平旋转，或者垂直旋转，单纯修改立方体本身的属性，就有点困难。

      

     加入水平“支架”，垂直“支架”，再把立方体放上去，然后旋转外面的支架即可。这个原理类似于在外面套了一层壳，类似于陀螺仪的结构。

    增加水平，垂直“支架”

    设置水平，垂直旋转帧动画

     设置水平垂直旋转动画

     设置尺寸与正方体边长相等，否则旋转轴会偏离正方体

    设置3D透视属性，否则无法看到立体透视效果

     6.更多思考

    a.如果想按照某个倾斜的轴旋转，如何操作实现

    b.如果在立方体表面添加更多的面，每个面，实现不同的颜色，能否有更好的立体效果

    c.如何添加鼠标的操作，滑动鼠标，可以转动立方体

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8"/>
    5. 		<title>Rotate Dicetitle>
    6. 		<link rel="stylesheet" type="text/css" href="./styles.css"/>
    7. 	head>
    8. 	<body>
    9. 		<div class="dice">
    10. 			<div class="vertical">
    11.         <div class="horizontal">
    12.           <div class="cube">
    13.             <div class="face front one">
    14.               <span class="dot">span>
    15.             div>
    16.             <div class="face back two">
    17.               <span class="dot">span>
    18.               <span class="dot">span>
    19.             div>
    20.             <div class="face up three">
    21.               <span class="dot">span>
    22.               <span class="dot">span>
    23.               <span class="dot">span>
    24.             div>
    25.             <div class="face down four">
    26.               <div class="dot-row">
    27.                 <span class="dot">span>
    28.                 <span class="dot">span>
    29.               div>
    30.               <div class="dot-row">
    31.                 <span class="dot">span>
    32.                 <span class="dot">span>
    33.               div>
    34.             div>
    35.             <div class="face left five">
    36.               <div class="dot-row">
    37.                 <span class="dot">span>
    38.                 <span class="dot">span>
    39.               div>
    40.               <div class="dot-row">
    41.                 <span class="dot">span>
    42.               div>
    43.               <div class="dot-row">
    44.                 <span class="dot">span>
    45.                 <span class="dot">span>
    46.               div>
    47.             div>
    48.             <div class="face right six">
    49.               <div class="dot-row">
    50.                 <span class="dot">span>
    51.                 <span class="dot">span>
    52.                 <span class="dot">span>
    53.               div>
    54.               <div class="dot-row">
    55.                 <span class="dot">span>
    56.                 <span class="dot">span>
    57.                 <span class="dot">span>
    58.               div>
    59.             div>
    60.             <div class="axis-face x">div>
    61.             <div class="axis-face y">div>
    62.             <div class="axis-face z">div>
    63.           div>
    64. 				div>
    65. 			div>
    66. 		div>
    67. 		
    68. 	body>
    69. html>

    1. html
    2. {
    3. 	background-color: black;
    4. 	font-size:100px;
    5. 	padding: 1em;
    6. }
    7.  
    8. /*骰子动画*/
    9. .vertical{
    10. 	animation: rotateX 5s infinite linear;
    11. }
    12. .horizontal{
    13. 	animation: rotateY 5s infinite linear;
    14. }
    15. .cube{
    16. 	transform: rotateX(-45deg) rotateY(45deg);
    17. }
    18. @keyframes rotateY {
    19. 	from{transform:rotateY(0);}
    20. 	to{transform:rotateY(360deg);}
    21. }
    22. @keyframes rotateX {
    23. 	from{transform:rotateX(0);}
    24. 	to{transform:rotateX(360deg);}
    25. }
    26. /*面的样式*/
    27. .dice,.vertical,.horizontal,.cube,.face{
    28. 	transform-style:preserve-3d;
    29. }
    30. .dice,.vertical,.horizontal,.cube,.face,.face::after,.axis-face{
    31. 	width:1em;
    32. 	height: 1em;
    33. }
    34. .dice{
    35. 	margin: auto;
    36. }
    37. .cube{
    38.   position: relative;
    39. }
    40. .face,.face::after,.axis-face{
    41. 	position: absolute;
    42.   top:0;
    43.   left: 0;
    44. }
    45. .face{
    46. 	box-sizing: border-box;
    47.   padding: .15em;
    48.   background-color: white;
    49.   border-radius: 40%;
    50.   box-shadow: 0 0 .2em #ccc inset;
    51. }
    52. .face::after{
    53.   content:"";
    54.   display: block;
    55.   border-radius: .2em;
    56.   transform: translateZ(-.1px);
    57.   background-color: #e0e0e0;
    58. }
    59. .axis-face{
    60.   background:#e0e0e0;
    61. }
    62.  
    63. /*点的样式*/
    64. .dot{
    65.   width:.2em;
    66.   height: .2em;
    67.   display: inline-block;
    68.   background: #444;
    69.   border-radius: 50%;
    70.   box-shadow: inset .05em .05em .1em black;
    71. }
    72.  
    73. /* 面的方位*/
    74. .face.front{
    75.   transform: translateZ(.5em);
    76. }
    77. .face.back{
    78.   transform: translateZ(-.5em) rotateY(180deg);
    79. }
    80. .face.up{
    81.   transform: translateY(-50%) rotateX(90deg);
    82. }
    83. .face.down{
    84.   transform: translateY(50%) rotateX(-90deg);
    85. }
    86. .face.left{
    87.   transform: translateX(-50%) rotateY(-90deg);
    88. }
    89. .face.right{
    90.   transform: translateX(50%) rotateY(90deg);
    91. }
    92. .axis-face.x{
    93.   transform:rotateY(90deg);
    94. }
    95. .axis-face.y{
    96.   transform:rotateX(90deg);
    97. }
    98. .axis-face.z{
    99. }
    100.  
    101. /* 点的排列布局*/
    102. .face,.dot-row{
    103.   display: flex;
    104. }
    105. .face.one{
    106.   align-items: center;
    107.   justify-content: center;
    108. }
    109. .face.two{
    110.   justify-content: space-around;
    111. }
    112. .face.two .dot:nth-child(2){
    113.   align-self: flex-end;
    114. }
    115. .face.three{
    116.   justify-content: space-around;
    117. }
    118. .face.three .dot:nth-child(2){
    119.   align-self:center;
    120. }
    121. .face.three .dot:nth-child(3){
    122.   align-self: flex-end;
    123. }
    124. .face.four{
    125.   flex-direction: column;
    126.   justify-content: space-between;
    127. }
    128. .face.four .dot-row{
    129.   justify-content: space-between;
    130. }
    131. .face.five{
    132.   flex-direction: column;
    133.   justify-content: space-between;
    134. }
    135. .face.five .dot-row{
    136.   justify-content: space-between;
    137. }
    138. .face.five .dot-row:nth-child(2){
    139.   justify-content:center;
    140. }
    141. .face.six{
    142.   flex-direction: column;
    143.   justify-content: space-around;
    144. }
    145. .face.six .dot-row{
    146.   justify-content: space-between;
    147. }

  • 相关阅读:
    怎样写出好文章？
    C++ 之多态（一）
    消息中间件MQ的学习境界和路线
    IPSec
    基于PHP+MySQL汽车租赁管理系统的设计与实现
    Vue源码之模板编译浅析
    【嵌入式学习】--Uart串口
    《mSystems》比较宏基因组学探究海洋和陆地生态系统中磷酸盐分解代谢途径
    如何利用监控保障发布质量？
    WebVR — 网络虚拟现实
  • 原文地址：https://blog.csdn.net/konglingbin66/article/details/127954502