                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3 3D 特效

為什么呈現(xiàn)不了立體的效果，我用的是谷歌的

<!DOCTYPE?html>
<html>
<head>
??<title>骰子</title>
??<style?type="text/css">
????html,body{
??????margin:?0;
??????padding:?0;
????}
????.table{
??????width:?100%;
??????height:?600px;
??????position:?absolute;
??????top:?50%;
??????margin-top:?-300px;
??????background-color:?#eee;

??????-webkit-perspective:?800px;
????}

????.dice{
??????width:?200px;
??????height:?200px;
??????margin:?200px?auto;
??????position:?relative;

??????-webkit-transform-style:?preserve-3d;
??????-webkit-backface-visibility:?hidden;
??????-webkit-transition:?all?1s?ease-out;
????}

????.side{
??????width:?100%;
??????height:?100%;
??????background-color:?#fff;
??????border-radius:?20px;
??????position:?absolute;
??????top:?0;
??????left:?0;
??????text-align:?center;
??????line-height:?200px;
??????font-size:?100px;
??????font-weight:?bold;
????}
????#side1{
??????-webkit-transform:?translateZ(100px);
????}
????#side6{
??????-webkit-transform:?translateZ(-100px);
????}

????#side2{
??????-webkit-transform:?rotateX(90deg)?translateZ(-100px);
????}
????#side4{
??????-webkit-transform:?rotateX(-90deg)?translateZ(-100px);
????}

????#side3{
??????-webkit-transform:?rotateY(-90deg)?translateZ(-100px);
????}
????#side5{
??????-webkit-transform:?rotateY(90deg)?translateZ(-100px)?;
????}

??</style>
</head>
<body>
??<div?class="table">
????<div?class="dice"?id="dice">
????????<div?class="side"?id="side1">1</div>
????????<div?class="side"?id="side2">2</div>
????????<div?class="side"?id="side3">3</div>
????????<div?class="side"?id="side4">4</div>
????????<div?class="side"?id="side5">5</div>
????????<div?class="side"?id="side6">6</div>
????</div>
????<div?class="control">
??????<button?onclick="turn()">翻滾</button>
????</div>
??</div>
??<script>
????function?getAngle()?{
??????var?angle?=?Math.ceil(Math.random()*8-4)*90;
??????return?angle;
????}
????function?turn(){
??????var?dice?=?document.getElementById("dice"),
??????????strAngel?=?"rotateX("+getAngle()+"deg)?rotateY("+getAngle()+"deg)?rotateZ("+getAngle()+"deg)";
??????dice.style.webkitTransform?=?strAngel;
????}
??</script>
</body>
</html>