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. cronolog 对 tomcat 7 进行日志切割

    一.安装 软件 cronolog-1.6.2.tar.gz tar zxvf cronolog-1.6.2.tar.gz cd cronolog-1.6.2 ./configure && ...

  2. (简单) POJ 1195 Mobile phones，二维树状数组。

    Description Suppose that the fourth generation mobile phone base stations in the Tampere area operat ...

  3. storybody中页面跳转

    - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ if ([segue.destinationViewCont ...

  4. ListView与RadioButton组合——自定义单选列表

      标签: radiobuttonlistviewandroidlayout 2013-09-10 11:13 19396人阅读 评论(8) 收藏 举报  分类: Android(19)  版权声明: ...

  5. jquery 改变变量出现值不同步

    出现问题的代码 var unc = 0; $.get( 'index.php', 'data=1', function(res) { unc=1; } ); alert(nuc); 这样的话,不管aj ...

  6. FZU 1063 三维扫描

    水题.DFS求连通块. #include<cstdio> #include<cstring> #include<cmath> #include <iomani ...

  7. SD卡初始化以及命令详解

    SD卡是嵌入式设备中很常用的一种存储设备,体积小,容量大,通讯简单,电路简单所以受到很多设备厂商的欢迎,主要用来记录设备运行过程中的各种信息,以及程序的各种配置信息,很是方便,有这样几点是需要知道的 ...

  8. DateFormat 竟然是非线程安全的？！！！！！

    今天撸代码忽然发现一个奇怪的一场抛出,经过一番排查发现有可能DateFormat 的多线程问题造成的,网上一查DateFormat竟然非线程安全.那我原先的代码...(细思极恐)

  9. 微信小程序问题2：未配置

    app.json 中未配置当前页面 pages/swipertest/swipertest 请检查后重试.console.error(`PAGE DEFINE ERRORapp.json 中未配置,当 ...

  10. REST API设计规范

    完全面向资源,API以复数形式表示 路径(Endpoint) http://example.com/libraries //列出所有图书馆 http://example.com/books //列出所 ...