3d旋转

transform 3D 变形 transform ： 3D变形可以近似理解为沿着Z轴移动元素，使得元素更加靠近或者远离你，从而使元素看起来变得更大或者更小。 ·translate3d(x,y,z) 定义3D转换。 ·translateY(y) 定义转换，只是用Y轴的值。 ·translateX(x) 定义转换，只是用X轴的值。 ·translateZ(z) 定义3D转换，只是用Z轴的值。 ·rotate3d(x,y,z) 定义3D旋转。 ·rotateX(angle) 定义沿着X轴的3D旋转。 ·rotateY(angle) 定义沿着Y轴的3D旋转。 ·rotateZ(angle) 定义沿着Z轴的3D旋转。 ·scale3d(x,y,z) 定义3D缩放旋转。 ·scaleZ(z) 通过设置Z轴的值来定义3D缩放旋转。 ·scaleX(x) 通过设置X轴的值来定义3D缩放旋转。 ·scaleY(y) 通过设置Y轴的值来定义3D缩放旋转。 ·martrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义3D转换，使用16个值的4x4矩阵。 ·transform-origin 允许你改变被转换元素的位置。2D转换元素能改变元素x和y轴。3D转换 元素还能改变其 Z轴。 ·perspective(n) 为3D转换定义透视视图。 ·transform-style

Circlr 插件是一款基于 jQuery 的可以对图片进行360度全方位旋转展示的插件。 Circlr 通过按一定角度规律拍摄的产品图片，制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的 Rollerblade ，动画顺畅，也更易于控制，非常适合于商品的展示。 特点 1. 支持水平或垂直方向旋转。 2. 支持移动触摸事件。 3. 支持滚动事件。 4. 图片预加载处理。 5. 可以反向和循环旋转图片。 代码基本使用 使用方法： 1. 引用js文件包 <script src="js/jquery.min.js"></script> <script src="js/circlr.min.js"></script> #### 2.书写结构： <div class="container"> <div id="circlr"> <img data-src="picture/1.png" /> <img data-src="picture/2.png" /> <img data-src="picture/3.png" /> ... // 这里放入所需图片即可， 图片太多可用js动态添加 <div id="loader"></div> </div> </div> 注意， 是 自定义属性 data-src 里面写路径 2. loader 是 加载项

CSS3 3D变形效果 CSS3 transform3D变形 transform的含义是：改变，使…变形；转换 三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数： 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数； 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数； 3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数； transform:translate()： 含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。 HTML代码如下： <div class="demo_transform1"></div> css代码如下： .demo_transform1{ width:300px; height:200px; background:#00f; margin:50px auto; -webkit-transform:translate(120px,0); -moz-transform:translate(120px,0px)； } transform

CSS3 3D 转换 三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数： 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数； 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数； 3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数； 3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。 1.3D位移 在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。 随着px的增加，直观效果上： X：从左向右移动 Y：从上向下移动 Z：以方框中心为原点，变大 从上图的效果可以看出，当z轴值越大时，元素也离观看者更近，从视觉上元素就变得更大；反之其值越小时，元素也离观看者更远，从视觉上元素就变得更小。 例子： height: 300px; float: left; margin: 15px; position: relative;