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. CentOS 7 x64 安装 Ceph

    CentOS 7  x64 安装 Ceph 二, 实验环境 节点            IP                 主机名                  系统 MON         1 ...

  2. CentOS 6.4 x64 Percona-Server-5.6.15 源码安装

    首先下载 Percona-Server-5.6 http://www.percona.com/downloads/Percona-Server-5.6/LATEST/source/ 然后必须先安装cm ...

  3. Zipf’s Law

    Let f(w) be the frequency of a word w in free text. Suppose that all the words of a text are ranked ...

  4. Base64图片与UIImage的相互转化

    http://blog.csdn.net/fudesign2008/article/details/38903085 Base64图片 -> UIImage - (UIImage *) data ...

  5. bzoj1176: [Balkan2007]Mokia【cdq分治】

    把询问搞成4个,cdq分治. #include <bits/stdc++.h> #define rep(i, a, b) for (int i = a;i <= b; i++) #d ...

  6. STM32 PWM波

    利用STM32产生占空比可以调节的PWM波 科普:pwm(Pulse Width Modulation)脉宽调制 关于pwm波的产生:1.首先来看一下代码: pwm波模式的相关配置(利用的是定时器TI ...

  7. EntityFrameWork分页

    EF分页代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...

  8. SpringMVC常用注解@Controller,@Service,@repository,@Component

    SpringMVC常用注解@Controller,@Service,@repository,@Component controller层使用@controller注解 @Controller 用于标记 ...

  9. Java JDBC连接SQL Server2005错误：通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败 及sql2008外围服务器

    转载:Java JDBC连接SQL Server2005错误:通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败 错误原因如下: Exception in thread & ...

  10. 请使用支持 JDBC 4.0 的 sqljdbc4.jar 类库

    转载请使用支持 JDBC 4.0 的 sqljdbc4.jar 类库 1.下载最新的JDBC(2012/3/6) http://www.microsoft.com/downloads/zh-cn/de ...