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. Bash shell 的算术运算有四种方式

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~1:使用 expr 外部程式加法 r=`expr 4 + 5`echo $r注意! '4' '+' '5' 这三者之间要有空白r=`e ...

  2. 检测网站挂马程序（Python）

    系统管理员通常从svn/git中检索代码,部署站点后通常首先会生成该站点所有文件的MD5值,如果上线后网站页面内容被篡改(如挂马)等,可以比对之前生成MD5值快速查找去那些文件被更改,为了使系统管理员 ...

  3. (简单) POJ 3254 Corn Fields，状压DP。

    Description Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; ...

  4. [iOS Animation]-CALayer 显示动画

    显式动画 如果想让事情变得顺利,只有靠自己 -- 夏尔·纪尧姆 上一章介绍了隐式动画的概念.隐式动画是在iOS平台创建动态用户界面的一种直接方式,也是UIKit动画机制的基础,不过它并不能涵盖所有的动 ...

  5. jqgrid的外观重绘

    1.如果你想随时更改jqGrid的外观和列,可以先将jqGrid卸载掉再重新加载:$(grid).GridUnload();  $("#list_server_table").tr ...

  6. NSURLRequest POST方式请求服务器示例

    http://lizhuang.iteye.com/blog/1833297 1.  准备阶段 NSString *urlString = [NSString stringWithFormat:@&q ...

  7. random 函数

    Random()在Delphi中,有一随机函数,是这样定义的:function Random [ ( Range: Integer) ]; 其中,参数Range为一整数,该函数返回值也为整数,其范围为 ...

  8. 直流电机驱动PWM频率（转）

    源:直流电机驱动PWM频率 1.没有统一的标准,其实PWM的频率和你的电机感抗和你需要的速度响应时间有很大的关系.一般的电机用14K就足够了.当然自需要简单的调速可以随便选. 如果电机转速比较高,感抗 ...

  9. UVa 10258 - Contest Scoreboard

    题目大意:关于acm竞赛排名的题目,对于参赛者首先按做出的题目排名,然后是罚时,最后是编号. 多关键字域排序问题. #include <cstdio> #include <cstri ...

  10. UVa 299 - Train Swapping

    题目大意:给n个数的一个序列,通过交换相邻的两个数使得这n个数按照从小到大的顺序排列. Inversion index problem: count how many swaps are needed ...