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,);

    -moz-transform:translate(120px,0px)；

  }

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。

HTML代码如下：
<div class="demo_transform2"></div>
css代码如下：
.demo_transform2{

    width:300px;

    height:200px;

    background:#00f;

    margin:50px auto;

    -webkit-transform:rotate(10deg);

    -moz-transform:rotate(10deg);

  }

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

HTML代码如下：
<div class="demo_transform3"></div>
css代码如下：
.demo_transform3{

    width:300px;

    height:200px;

    background:#00f;

    margin:50px auto;

    -webkit-transform:scale(1.5);

    -moz-transform:scale(1.5);

  }

transform:skew()：

含义：倾斜；

HTML代码如下：
<div class="demo_transform4"></div>
css代码如下：
.demo_transform4{

    width:300px;

    height:200px;

    background:#00f;

    margin:50px auto;

    -webkit-transform:skew(20deg);

    -moz-transform:skew(20deg);

  }

transform综合：

transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例（一个摇筛子3D效果）：

效果图如下：

HTML代码如下：
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="css/1230.css">

  </head>

  <body>

    <div class="box">

      <div class="zhuan">

         <div class="bian yi"></div> <!--第一个面 -->

        <div class="bian er"></div>  <!--第二个面-->

        <div class="bian san"></div>  <!--第三个面-->

        <div class="bian si"></div>  <!--第四个面-->

        <div class="bian wu"></div>  <!--第五个面-->

        <div class="bian liu"></div> <!--第六个面-->

      </div>

    </div>

  </body>

</html>
css代码如下：
body{

  background:#864521;

}

/*视距800px*/

.box{

  perspective:800px;

  transform-style: preserve-d;

  margin-top:100px;

}

.zhuan{

    width:200px;

    height:200px;

    margin: auto;

    position: relative;

    transform-style: preserve-d;

    /*设置时间为5秒*/

    transition:5s;

}

/*鼠标移上之后开始旋转*/

.zhuan:hover{

  transform:rotateY(3600deg) rotateX(1800deg);

}

.zhuan .bian{

  width:200px;

  height:200px;

  position: absolute;

}

/*设置图片1,延Y轴旋转90度，延Z轴移100px*/

.yi{

  transform:rotateY(90deg) translateZ(100px);

  background:url(../img/.png) no-repeat;

  background-size:100%100%;

}

/*设置图片2,延Y轴旋转90度，延Z轴移-100px*/

.er{

  transform:rotateY(90deg) translateZ(-100px) rotateY(180deg);

  background:url(../img/.png) no-repeat;

  background-size:100%100%;

}

/*设置图片3,延X轴旋转90度，延Z轴移100px*/

.san{

  transform:rotateX(90deg) translateZ(100px);

  background:url(../img/.png) no-repeat;

  background-size:100%100%;

}

/*设置图片4,延X轴旋转90度，延Z轴移-100px*/

.si{

  transform:rotateX(90deg) translateZ(-100px) rotateX(180deg);

  background:url(../img/.png) no-repeat;

  background-size:100%100%;

}

/*设置图片5,延Z轴移100px*/

.wu{

  transform:translateZ(100px);

  background:url(../img/.png) no-repeat;

  background-size:100%100%;

}

/*设置图片6,延Y轴旋转180度，延Z轴移-100px*/

.liu{

  transform:translateZ(-100px) rotateY(180deg);

  background:url(../img/.png) no-repeat;

  background-size:100%100%;

}

　 ！！！注意：拷贝源码，一定要引用对css路径，设置对图片路径，方能实现效果！

今天主要向大家介绍了3D空间的3D旋转、3D位移、3D缩放功能以及应用场景。让大家对3D　Transform有一个初步的了解，并能根据这些基础知识制作出自己需要的效果。

作者：大鹏哥

CSS3 3D变形效果的更多相关文章

  1. 都能读懂的css3 3D变形效果

    css3 3D变形效果 CSS3 transform3D变形 transform的含义是:改变,使-变形:转换 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换 ...

  2. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  3. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  4. CSS3 3D轮播主要可以分成这样的三类

    中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...

  5. css3 3D旋转效果

    css3 record2 css3 3D旋转效果 需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...

  6. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  7. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

  8. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  9. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

随机推荐

  1. CodeForces 626C Block Towers

    构造AC的.左右两边都先不用6的倍数,然后哪边数字大那一边往回退一下,然后再比较哪边数字大.......直到结束 #include<cstdio> #include<cstring& ...

  2. ios系统 ipa文件 打包流程详解 及 常见问题处理

    注:先反省一下,原本打算一天一篇,每天进步一点点,但是最近变懒了,居然三天没有更新,在此告诫各位道友及我自己,程序员需戒欲,搞技术需持之以恒,不能三天打鱼,两天晒外. 现在步入主题,前段时间使用xco ...

  3. uses crt;

    1.uses CRT,表示引用CRT.pas单元.CRT.pas单元是Pascal最重要的单元之一,主要用于字符界面的操作,里面内置了清屏.光标定位.删除行.调整字符亮度.前景色.背景色等功能函数.2 ...

  4. 增量式PID的stm32实现（转）

    源:增量式PID的stm32实现,整定过程 首先说说增量式PID的公式,这个关系到MCU算法公式的书写,实际上两个公式的写法是同一个公式变换来得,不同的是系数的差异. 资料上比较多的是: 还有一种是: ...

  5. 移位操作<< >> 小计

    最近看代码移位操作的使用比较多,通过查阅资料搞明白了之前一直不明白的一个问题 移位效果: 左移位<<: 相当于乘以  2的左移位的相应次方   例如: x << 3    =& ...

  6. TCP/IP 标志位 SYN ACK RST UTG PSH FIN

    三次握手:发送端发送一个SYN=1,ACK=0标志的数据包给接收端,请求进行连接,这是第一次握手:接收端收到请求并且允许连接的话,就会发送一个 SYN=1,ACK=1标志的数据包给发送端,告诉它,可以 ...

  7. JavaScript高级程序设计-8：BOM

    1. 什么是BOM? BOM(Browser Object Mode) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象 ...

  8. 安卓 ArrayList,LinkedList,HashSet,Vector,TreeSet的区别和使用

    java的集合就那么几种 总体为:List,Set,Map (都是接口由其子类去实现具体的方法) ArrayList,LinkedList,Vector都属于List List:元素是有顺序的,元素可 ...

  9. C++ 句柄类

    一.容器与继承 在容器中保存有继承关系的对象时,如果定义成保存基类对象,则派生类将被切割,如果定义成保存派生类对象,则保存基类对象又成问题(基类对象将被强制转换成派生类对象,而派生类中定义的成员未被初 ...

  10. VC创建多级目录

    BOOL ForceCreateDirectory(string strDir)  {    BOOL bRet = FALSE;    //确保以"\"结尾,以创建最后一个目录  ...