课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

效果不出来

来源：3-4 编程挑战

qq_凌空_4

2016-04-15 11:18

<!DOCTYPE html>

<html>

<head>

    <title>正方体</title>

<style>

html, body, div, span,

        h1, h2, h3, h4, h5, h6, p

        a, img, ol, ul, li

        {

            margin:0;padding:0;border:0;outline:0;

        }

.cubebox{ -webkit-perspective:800px; -webkit-perspective-origin:50% 50%;}

.cube{position:relative;margin:150px auto;height:200px;width:200px;-webkit-transform-style:preserve-3d;}

.face{position:absolute;background-color:#000;color:#fff;font-size:180px;line-height:180px;text-align:center; height:180px;width:180px;padding:10px;-webkit-transition:-webkit-transform 1s linear;}

#one{}

#two{-webkit-transform-origin:right;-webkit-transform:rotateY(-90deg);}

#three{-webkit-transform-origin:left;-webkit-transform:rotateY(90deg);}

#four{-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);}

#five{-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);}

#six{-webkit-transform:rotateZ(-200px);}

.btn{

            margin:0 auto;

            font-size:16px;

            font-weight:bold;

            width:800px;

        }

.btn .range-control{width:721px;}

</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("cube").style.webkitTransform="rotateX("+x+"deg)"+"rotateY("+y+"deg)"+"rotateZ("+z+"deg)";

document.getElementById("degx-span").innerText=x;

document.getElementById("degy-span").innerText=y;

document.getElementById("degz-span").innerText=z;

}

</script>   

</head>

<body>

<div class="cubebox">

<div class="cube">

    <div class="face" id="one">1</div>

    <div class="face" id="two">2</div>

    <div class="face" id="three">3</div>

    <div class="face" id="four">4</div>

    <div class="face" id="five">5</div>

    <div class="face" id="six">6</div>

</div>

</div>

<div class="btn">

    <p>rotatex:<span id="degx-span">0</span>deg</p>

    <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onchange="rotate()"><br/>

    <p>rotatey:<span id="degy-span">0</span>deg</p>

    <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" onchange="rotate()"><br/>

    <p>rotatez:<span id="degz-span">0</span>deg</p>

    <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" onchange="rotate()"><br/>

</div>

</body>

</html>


写回答 关注

2回答

  • qq_志当存高远_0
    2016-04-24 13:40:12

    看下是不是浏览器兼容性问题，我也是刚学，不是很会

    0 0
  • qq_志当存高远_0
    2016-04-16 15:08:58

    #six{-webkit-transform:rotateZ(-200px);}将这行代码换成-webkit-transform: translateZ(-200px);试试

    1 0

    qq_凌空_...

    还是不能转骰子

    2016-04-18 16:05:25

    共 1 条回复 >

CSS3 3D 特效

使用CSS3当中的属性，创建真实可用的三维效果

78572 学习 · 425 问题

查看课程

相似问题

出不来效果

回答 1

效果出来了

回答 3

实现不出来3D效果

回答 2

没有效果出来

回答 2

貌似效果没出来

回答 1

打开慕课网App查看更多内容