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. Spring自学教程-jabc编程详解、RowMapper使用(三)

    一.JDBC 1.JDBC的编程特点 静态代码+动态变量 = jdbc编程.在spring中动态变量可以用注入的形式给予.这样的编程方式适合包装成模板.静态代码构成了模板,而动态变量则是需要传入的参数 ...

  2. FZU 2101 大三的美好时光

    DP+离散化. 首先需要把时间离散化,剩下的就是简单DP. 还要判断哪些选修课与必修课时间有重合,我用了前缀和来处理. 注意:这题时间端点也不能重合. #include<cstdio> # ...

  3. Badboy安装与使用

    Badboy是一个录制web脚本的工具 1.下载Badboy:http://www.badboy.com.au/download/add 2.启动Badboy,认识主界面 3.使用Badboy录制we ...

  4. iOS 文本属性

    http://blog.csdn.net/hello_hwc/article/details/46731991

  5. java求两个集合的差集

    public static void main(String[] args) {Set set = new HashSet();Set set1 = new HashSet();set.add(&qu ...

  6. bzoj2555

    开始时间:19:40 完成时间:21:00 传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2555 题目大意:(1):在当前字符串的后面插入一 ...

  7. [Angular Tutorial]PhoneCat Tutorial App

    (注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...

  8. 单例--iOS

    GCD单例: static ModulesManager * sharedManager = nil; + (id)sharedInstance { static dispatch_once_t on ...

  9. Angular - - $compile编译服务与指令

    $compile 这是个编译服务.编译一段HTML字符串或者DOM的模板, 产生一个将scope和模板连接到一起的函数. 编译服务主要是为指令编译DOM元素,下面的一大段也是主要介绍指令的. 下面是一 ...

  10. iOS 准备

    iOS 编程知识点 iOS 基础知识点 iOS 之 系统机制 Xcode 使用技巧 Mac 使用技巧 iOS 之 英语 iOS 之 编外知识点 iOS 知识库链接