CSS3 3D变形效果

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,0);
    -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-3d;
  margin-top:100px;
}
.zhuan{
    width:200px;
    height:200px;
    margin:0 auto;
    position: relative;
    transform-style: preserve-3d;
    /*设置时间为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/1.png) no-repeat;
  background-size:100%100%;
}
/*设置图片2,延Y轴旋转90度,延Z轴移-100px*/
.er{
  transform:rotateY(90deg) translateZ(-100px) rotateY(180deg);
  background:url(../img/2.png) no-repeat;
  background-size:100%100%;
}
/*设置图片3,延X轴旋转90度,延Z轴移100px*/
.san{
  transform:rotateX(90deg) translateZ(100px);
  background:url(../img/3.png) no-repeat;
  background-size:100%100%;
}
/*设置图片4,延X轴旋转90度,延Z轴移-100px*/
.si{
  transform:rotateX(90deg) translateZ(-100px) rotateX(180deg);
  background:url(../img/4.png) no-repeat;
  background-size:100%100%;
}
/*设置图片5,延Z轴移100px*/
.wu{
  transform:translateZ(100px);
  background:url(../img/5.png) no-repeat;
  background-size:100%100%;
}
/*设置图片6,延Y轴旋转180度,延Z轴移-100px*/
.liu{
  transform:translateZ(-100px) rotateY(180deg);
  background:url(../img/6.png) no-repeat;
  background-size:100%100%;
}

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




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

作者:鹏鹏

generated by haroopad

时间: 02-10

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

CSS3 3D transform

3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) rotateZ( angle ) 邹凯的体操单杠运动是rotateX: 蔡依林姐姐的钢管舞是rotateY: 旋转飞刀的特技表演是rotateZ: 2.perspective属性,透视点,CSS3 3D transform的透视点是在浏览器的前方! 比方说,一个1680像素宽的显示器中有张美女图片,应用了3D transform,同时,该元素或该元素父辈元素设置的perspectiv

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

CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网站[iframe中],并可浏览,关闭后返回原来状态. 4.PC端,将额外显示2个css3做的旋转盒子[没什么意义] 5.移动端只显示一个导航盒子[模拟器正常,真机无效,留待以后查看,兼容开发有待提高...] 注:原本打算排列导航盒子,这样的话导航也变得比较好玩 但是,如果使用iframe来显示网站预

CSS3 3D骰子

z zz zz zzzz zzzzz zzzzzz CSS3 3D骰子,布布扣,bubuko.com

css3 3d小demo

css3 3d案例总结 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家.就把最近做的比较好的给大家分享下 1.旋转拼图 首先看下效果 代码主要由HTML和CSS3组成,应该说还是比较简单的. 首先是HTML代码: <div class="camera" id="camera"> <div class="kuai"> <div class="mian"></div>

好吧,CSS3 3D transform变换,不过如此!

一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一些3D效果的交互.有些事情,总以为是遥远的未来,谁知真正发生的时候说来就来,比如说一颗想结婚的心,又比方说在实际项目中折腾3D transform效果. 然而,虽然以前折腾过3D变换效果(webkit

css3 - 3D transform 变化

3d 视图效果,x/y/z轴的说明图 1 rotateX( angle ) 2 rotateY( angle ) 3 rotateZ( angle ) 4 rotate旋转的意思,rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴 rotateX.rotateY.rotateZ.rotate3d 旋转的效果说明图 必不可少的 perspective 属性 1 perspective的中文意思是:透视,视角! 2 perspective属性的存在与否决定了你所看到的是2次元的还

CSS3 3D transform变换

主要是看了这位大佬的文章,http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/,有的很大的收获,在上一个制作3D变形案例中明白了一些原理. 首先一个立体坐标系: 按照我的理解: 1.认识的突破口:rotateX, rotateY, rotateZ 3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) ro

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

中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面大神多,如果有哪里讲得不对,还请各位前辈多多指教了~在这个ppt里面,大神Tom Lane分别从三个角度对Postgresql的内部原理进行了介绍. 在传统的计算机算法和数据结构领域,大多数专业教材和书籍的默认语言都是Java或者C/C+ +,O’REILLY家倒是出了一本叫做<数据结构与算法javas

CSS3 3D立方体效果

CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立方体的效果实例来深入了解css3的transform属性,下面是这个实例的截图,加上动画还能旋转起来哟,是不是很酷炫?换上你喜欢的女生的照片,就可以大胆的撩妹了,哈哈! 想要查看demo,请点击这里,3D transform立方体效果 初识transform 顾名思义:变换.就可以想到它可以做很多很