css3骰子（transform初识）_html/css_WEB-ITnose
利用css3制作可旋转的骰子，效果图如下，也可以查看 demo：
首先是骰子的html结构，.page 是骰子的六个页面的 class，#one-#six分别表示六个面，.point 是骰子表面的点数：
<div id="diceWapper"> <div id="dice"> <div id="one" class="page"> <div class="point first"></div> </div> ... </div> </div>
登入後複製
接着是控制骰子旋转方向和度数的控制器：
<div id="controler"> <div class="direction"> <span class="way">X 方向：<span id="xValue">0</span>度</span><input type="range" id="rotateX" min="-360" max="360" value="0" onchange="rotate()" /> </div> ... </div>
登入後複製
通过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 实现转动。
完整代码如下（可运行）：
<!DOCTYPE html><html><head> <title>css3骰子</title> <meta charset="utf-8"/> <style> *{margin:0;padding:0;} body{background-color: #D3D3D3;} #diceWapper{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; width: 200px; height: 200px; margin: 200px auto; } #dice{ width: 90px; height: 90px; position: relative; -webkit-transform-style:preserve-3d; } .page{ -webkit-transition: -webkit-transform 1s linear; position:absolute; width: 90px; height: 90px; background-color: #F8F8FF; } #two { -webkit-transform-origin:right; -webkit-transform: rotateY(-90deg); } #three { -webkit-transform-origin:bottom; -webkit-transform: rotateX(90deg); } #four { -webkit-transform-origin:top; -webkit-transform: rotateX(-90deg); } #five { -webkit-transform-origin:left; -webkit-transform: rotateY(90deg); } #six { -webkit-transform: translateZ(-90px); } .point{ width: 20px; height: 20px; box-sizing:border-box; margin: 5px; border-radius:20px; border:2px solid #d7d7d7; background-color: #FF4040; position: absolute; } #one .first{left:30px;top:30px;} #two .first{left:30px;top:15px;} #two .second{left:30px;top:45px;} #three .first{left:0px;top:0px;} #three .second{left:30px;top:30px;} #three .third{left:60px;top:60px;} #four .first{left:15px;top:15px;} #four .second{left:45px;top:15px;} #four .third{left:15px;top:45px;} #four .fourth{left:45px;top:45px;} #five .first{left:15px;top:15px;} #five .second{left:45px;top:15px;} #five .third{left:15px;top:45px;} #five .fourth{left:45px;top:45px;} #five .fifth{left:30px;top:30px;} #six .first{left:15px;top:0px;} #six .second{left:45px;top:0px;} #six .third{left:15px;top:30px;} #six .fourth{left:45px;top:30px;} #six .fifth{left:15px;top:60px;} #six .sixth{left:45px;top:60px;} #controler{ width: 300px; margin: 0 auto; } .way{width: 150px;display: inline-block;} input:range{width: 150px;display: inline-block;} </style> <script type="text/javascript"> function rotate(){ var x = document.getElementById("rotateX").value; var y = document.getElementById("rotateY").value; var z = document.getElementById("rotateZ").value; document.getElementById('dice').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)"; document.getElementById('xValue').innerText = x; document.getElementById('yValue').innerText = y; document.getElementById('zValue').innerText = z; } </script></head><body> <div id="diceWapper"> <div id="dice"> <div id="one" class="page"> <div class="point first"></div> </div> <div id="two" class="page"> <div class="point first"></div> <div class="point second"></div> </div> <div id="three" class="page"> <div class="point first"></div> <div class="point second"></div> <div class="point third"></div> </div> <div id="four" class="page"> <div class="point first"></div> <div class="point second"></div> <div class="point third"></div> <div class="point fourth"></div> </div> <div id="five" class="page"> <div class="point first"></div> <div class="point second"></div> <div class="point third"></div> <div class="point fourth"></div> <div class="point fifth"></div> </div> <div id="six" class="page"> <div class="point first"></div> <div class="point second"></div> <div class="point third"></div> <div class="point fourth"></div> <div class="point fifth"></div> <div class="point sixth"></div> </div> </div> </div> <div id="controler"> <div class="direction"> <span class="way">X 方向：<span id="xValue">0</span>度</span><input type="range" id="rotateX" min="-360" max="360" value="0" onchange="rotate()" /> </div> <div class="direction"> <span class="way">Y 方向：<span id="yValue">0</span>度</span><input type="range" id="rotateY" min="-360" max="360" value="0" onchange="rotate()" /> </div> <div class="direction"> <span class="way">Z 方向：<span id="zValue">0</span>度</span><input type="range" id="rotateZ" min="-360" max="360" value="0" onchange="rotate()" /> </div> </div></body></html>登入後複製
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前
By DDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
我如何使用html5＆lt; time＆gt; 元素以語義表示日期和時間？
Mar 12, 2025 pm 04:05 PM
我如何使用html5＆lt; time＆gt; 元素以語義表示日期和時間？
