这段代码还是非常简单，是看了一个老师的视频受的启发，也是调用了很多个函数，所以比较杂乱吧！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻转调节器</title>
<style type="text/css">
#container{
-webkit-transform: -webkit-transform 1s linear;
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style: -webkit-preserve-3d;
}
#squre{
width: 150px;
height: 150px;
background-color: #00BB00;
margin: 20px auto;
border-radius: 0;
}
.circle{
float: left;
}
.p1,.p2{
width: 50px;
border-radius: 10px;
}
#op{
font-size: 16px;
font-weight: bold;
color: gray;
width: 800px;
margin: 100px auto;
}
#op .change{
width: 721px;
}
</style>
</head>
<body>
<div id="container">
      <div id="squre"></div>
</div>
<button name="button" id="circle" class="circle" onclick="circle()">圆形</button>

<input type="text" id="width" class="p1" placeholder="宽"></input>

<input type="text" id="height" class="p2" placeholder="高"></input>

<button onclick="rec()">确定</button>

<button name="button" id="color" class="color" onclick="changecolor()">改个颜色</button>

<div id="op">

<p>rotate x: <span id="lolx">0</span> deg</p>
      <input type="range" min="-360" max="360" id="changeX" value="0" class="change" onchange="rotate()" /><br/>
<p>rotate y: <span id="loly">0</span> deg</p>
      <input type="range" min="-360" max="360" id="changeY" value="0" class="change" onchange="rotate()" /><br/>
<p>rotate z: <span id="lolz">0</span> deg</p>
      <input type="range" min="-360" max="360" id="changeZ" value="0" class="change" onchange="rotate()" /><br/>
</div>
<script type="text/javascript">

function circle(){
var circle=document.getElementById('squre');
circle.style.borderRadius="75px";
circle.style.width='150px';
squre.style.height='150px';
}

function rec(){
var squre=document.getElementById('squre');
var wid=document.getElementById('width').value;
var hei=document.getElementById('height').value;
squre.style.height=hei+'px';
squre.style.width=wid+'px';
squre.style.borderRadius='0';
}

/*这里是一个闭包的随机颜色代码*/

var getRandomColor = function(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}

function changecolor(){
var color=document.getElementById('squre');
color.style.backgroundColor=getRandomColor();

}

function rotate(){
var x = document.getElementById("changeX").value;
var y = document.getElementById("changeY").value;
var z = document.getElementById("changeZ").value;
document.getElementById('squre').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

document.getElementById('lolx').innerText = x;
document.getElementById('loly').innerText = y;
document.getElementById('lolz').innerText = z;
}
</script>
</body>
</html>

自己做得一个用于直观观察css3 transform属性中的rotate 3D效果的更多相关文章

  1. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  2. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

  3. css3动画属性中的transition属性

    一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...

  4. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  5. css3 transform属性多值的顺序问题

    对于transform属性的多值的顺序问题,我自己就被困扰过.后来知道了跟顺序有关,但是不知道为什么.我想应该很多人跟我以前一样,知其然不知其所以然.如果不知道的,也许这篇文章会对大家有所帮助. 先来 ...

  6. CSS3 transform属性

    说明: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行移动(translate).旋转(rotate).缩放(scale)或倾斜(skew) transition属 ...

  7. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  8. css3学习--css3动画详解二（3d效果）

    一.设置3D场景 perspective:800       //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴)    //视点的位置 transf ...

  9. 商品标签例子——CSS3 transform 属性

    积累很重要.从此开始记录前端生涯的点滴.... <!DOCTYPE html><html lang="en"><head> <meta c ...

随机推荐

  1. xmlns:xsi ——是指xml文件遵守xml规范，xsi全名：xml schema instance

    http://blog.sina.com.cn/s/blog_4b6f8d150100nx3e.html http://blog.csdn.net/iaiti/article/details/4226 ...

  2. （一）Redis在windows下的安装和使用

    1.下载redis服务端,地址:https://github.com/MSOpenTech/redis/releases 包含安装程序和源码. 2.解压<Redis-x64-3.2.100.zi ...

  3. Swift资料大全

    简单看了一下swift的语法,个人感觉相对于object-c很是简单明了.Swift的出现并不能说明iOS开发简单了很多,有可能会变得复杂,你需要学习两门编程语言,因为在程序员的世界里,务实并不是最重 ...

  4. ECMAScript 6 笔记（三）

    ES6中的基本扩展 一.函数的扩展 1. 函数参数的默认值 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console ...

  5. 日月如梭，玩转JavaScript日期

    一.Date对象 下面出现的源码都可以codepen在线查看. 1)时间戳毫秒计算 Date对象是基于"1970-01-01 08:00:00"到指定日期的毫秒数,不是" ...

  6. 阿里云oss总是提示SignatureDoesNotMatch错误怎么办

    网上的所有阿里云oss(C#)的例子几乎试遍了,为什么还是提示SignatureDoesNotMatch错误?什么原因?怎么办?下载一个阿里云提供的windows客户端发现,依然提示签名错误. 开始怀 ...

  7. 手动搭建apache james邮件服务器，实现邮件功能

    最近一直在搞邮件这块,本来我们邮件发送是用的腾讯免费的企业邮箱,邮件功能没有问题,但是由于邮件的限制,如下: 这些限制导致我们的部分客户是收不到邮件的,哪怕付费,这样的固定频率限制也是无法解决的,可以 ...

  8. 【微信开发】玩转PHP 数组用法！

    数组的起始下标可以不从0开始,例子为从2开始. $data = array(2=>'A','B','C');     运行结果:$data = array(2=>'A',3=>'B' ...

  9. (转)java二维数组的深度学习（静态与动态）

    转自:http://developer.51cto.com/art/200906/128274.htm,谢谢 初始化: 1.动态初始化:数组定义与为数组分配空间和赋值的操作分开进行:2.静态初始化:在 ...

  10. [java多线程] - 锁机制&同步代码块&信号量

    在美眉图片下载demo中,我们可以看到多个线程在公用一些变量,这个时候难免会发生冲突.冲突并不可怕,可怕的是当多线程的情况下,你没法控制冲突.按照我的理解在java中实现同步的方式分为三种,分别是:同 ...