css3 3d 与案例分析

最新推荐文章于 2024-02-19 08:56:23 发布
最新推荐文章于 2024-02-19 08:56:23 发布
阅读量408 收藏 3
点赞数
分类专栏： 前端
原文链接：https://www.mk2048.com/blog/blog.php?id=0jbhii2ib&title=css3+3d+%E4%B8%8E%E6%A1%88%E4%BE%8B%E5%88%86%E6%9E%90
版权

作者：魔洁

聊到3d那我们就先聊聊空间维度，首先一维，比如一条线就是一个一维空间，连点成线在这个空间里这些点只能前进后退，二维空间就是一个平面，这时点不仅可以前进后退还可以左右移动，3维空间也可以说是3d，这时点可以前进后退，左右，上下移动。css3里有几个关于3d运动的属性以及值我做一下解释
transform-style:preserve-3d;（transform-style是属性）（preserve-3d是值）
（这个属性可以把一个处于2维的div变为3d空间，把这个属性比作一个相机的摄像头,这个div内的内容会以3d的形式通过摄像头的形式反馈给你,他的子元素才会享受3d效果,子元素以下的元素就不会有3d效果。）
perspective:800px;
（这个属性是配合上边的属性使用的 ，把这个属性比作你的屏幕距离摄像头的距离）
transform:rotateY(180deg);
(把这个3d空间div看做一个人rotateY(180deg)，是做y轴旋转180°，y轴可以看作是一个人原地转身)
transform:rotatex(180deg);
（rotateY(180deg)，是做x轴旋转180°，x轴可以看作是一个人原地翻跟斗）
transform:rotateZ(180px);
（rotateZ(180px)，是在前进180px，x轴可以看作是一个人向前走180px，负值为后退）
看完这些相信下面的代码回好理解许多。

1.卡牌反转

html

<div class="zf">
  <div class="bigbox">
    <div class="xiaobox1"></div>
    <div class="xiaobox2"></div>
  </div>
</div>

zf是你距离屏幕800px的摄像头，bogbox是3d空间内的舞台，xiaobox1，xiaobox2是两个背面相对的演员；

css

html,body{
  background:#ff9f96;
}

.zf{
  width: 300px;
  height: 300px;
  margin:200px auto;
  perspective:800px;
}
.bigbox{
  width:300px;
  height:300px;
  position:relative;
  transform-style:preserve-3d;/*把bigbox变为3D空间*/
  transition:transform 1s;
}
.xiaobox1{
  backface-visibility:hidden;/*这行代码是xiaobox1设置为背面隐藏*/
  width:300px;
  height:300px;
  position:absolute;
  background:url(../img/dome061.jpg);
  background-size:650px 300px;February 10, 2017 10:48 AM
  transform:rotateY(180deg);/*让xiaobox1原地旋转180度*/
}
.xiaobox2{
  backface-visibility:hidden;
  width:300px;
  height:300px;
  position:absolute;
  background:url(../img/dome062.jpg);
  background-size:650px 300px;
}
.bigbox:hover{
  transform:rotateY(180deg);/*鼠标移到bigbox上他原地旋转180度*/
}

2.立方体

html

<div class="bigbox">
   <div class="box">
     <div class="pm qian"></div>
     <div class="pm hou"></div>
     <div class="pm left"></div>
     <div class="pm right"></div>
     <div class="pm top"></div>
     <div class="pm bottom"></div>
   </div>
</div>

同上个案例最外边的bigbox是距离屏幕800px的摄像头，box是舞台，pm就是正方体的前后左右上下面

css

.bigbox{
  margin:150px auto;
  width:300px;
  height:300px;
  perspective:800px;
  transform-style:preserve-3d;
}
.box{
  transform-style:preserve-3d;
  width:300px;
  height:300px;
  position:relative;
  -webkit-animation:xuanzhuan 4s infinite linear ;/*谁让box做无限循环的动画*/
}
.pm{
  width:300px;
  height:300px;
  position:absolute;
  text-align:center;
  font-size:200px;
  line-height:300px;
}
.qian{
  transform:translateZ(150px)；/*让qian向前走150px*/
  background:#59e7fa;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.hou{
  transform:rotateY(-180deg) translateZ(150px);/*让hou原地转身180°，再向前走150px*/
  background:#fa5959;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.top{
  transform:rotateX(90deg) translateZ(150px);/*沿x轴旋转90°，向前走150px*/
  background:#f7fa59;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.bottom{
  transform:rotateX(-90deg) translateZ(150px);/*沿x轴旋转-90°，向前走150px*/
  background:#e359fa;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.left{
  transform:rotateY(-90deg) translateZ(150px);/*沿y轴旋转-90°，向前走150px*/
  background:#595ffa;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.right{
  transform:rotateY(90deg) translateZ(150px);沿/*y轴旋转90°，向前走150px*/
  background:#79fa59;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
@-webkit-keyframes xuanzhuan{
    0%{
      -webkit-transform: rotateY(0deg);
    }
    50%{
      -webkit-transform: rotateY(360deg);
    }
    51%{
      -webkit-transform: rotateX(0deg);
    }
    100%{
      -webkit-transform: rotateX(360deg);
    }
}

3.翻牌

html

<div class="box">
  <div id="a">
  </div>
</div>
<input type="button" class="btn" name="" value="上一步"/>
<input type="button" class="btn" name="" value="下一步"/>i

box是摄像头，a是舞台，舞台里的演员我将用js渲染，class为fp

css

.box{ width:300px; height:300px; margin:auto; transform-style:preserve-3d; perspective:800px; }
#a{ float:left; transform-style:preserve-3d; width:300px; height:600px; position:relative; }
.btn{ width:60px; height:20px; border:0px; background:#ffe81c; color:#fff; text-align:center; line-height:20px; font-weight:700; cursor:pointer; }
.fp,.fp1,.fp2,.fp3,.fp4{ position:absolute; width:300px; height:300px; backface-visibility:hidden; font-size:150px; color:#fff; font-weight:700; text-align:center; line-height:300px; transform-origin:100% 100%;/*沿着下边旋转*/ }
.fp{ transform: rotateX(80deg); }
.fp1{ -webkit-animation:fz1 1s;/*执行动画fz1*/ transform: rotateX(0deg);/*执行完动画x轴是0°*/ }
.fp2{ -webkit-animation:fz2 1s;/*执行动画fz2*/ transform: rotateX(80deg);/*执行完动画x轴是80°*/ }
.fp3{ -webkit-animation:fz3 1s;/*执行动画fz3*/ transform: rotateX(80deg);/*执行完动画x轴是80°*/ }
.fp4{ -webkit-animation:fz4 1s;/*执行动画fz4*/ transform: rotateX(0deg);/*执行完动画x轴是0°*/ }
@-webkit-keyframes fz1{
    0%{ transform-origin:100% 100%; -webkit-transform: rotateX(80deg); }
    100%{ transform-origin:100% 100%; -webkit-transform: rotateX(0deg); }
}
@-webkit-keyframes fz2{
    0%{ transform-origin:100% 100%; -webkit-transform: rotateX(0deg); }
    100%{ transform-origin:100% 100%; -webkit-transform: rotateX(-280deg); }
}
@-webkit-keyframes fz3{
    0%{ transform-origin:100% 100%; -webkit-transform: rotateX(0deg); }
    100%{ transform-origin:100% 100%; -webkit-transform: rotateX(80deg); }
}
@-webkit-keyframes fz4{
    0%{ transform-origin:100% 100%; -webkit-transform: rotateX(80deg); }
    100%{ transform-origin:100% 100%; -webkit-transform: rotateX(360deg); }
}

因为我的背景图是dome061.jpg，dome062.jpg，dome063.jpg，dome064.jpg，dome065.jpg，我会把他们第三位数字声明在名为img的数组里

js

var img=[1,2,3,4,5];
    for(var i=0;i<5;i  ){
      $('#a').append('<div class="fp cs" style="background:url(img/dome06' img[i] '.jpg);background-size:100% 100%;"></div>');
    }
    //上边的for循环是渲染舞台里演员
    //pd是判断按下按钮的变量
    var pd=1;
    //a是判断演员的下标
    var a=4;
    $('.btn').eq(1).click(function(){
      if(a<0){
        a=4;
      }
      if(pd==1){
        pd  ;
        $('.fp').eq(a).removeClass('fp');//移除fp这个类
        $('.cs').eq(a).addClass('fp1');//因为演员我定义了两个类把fp移除了，还可以用cs抓起取员
      }else{
        $('.cs').eq(a).removeClass('fp1');
        $('.cs').eq(a).removeClass('fp2');
        $('.cs').eq(a).removeClass('fp3');
        $('.cs').eq(a).removeClass('fp4');
        $('.cs').eq(a).addClass('fp2');//下标是a的演员移除fp1，fp2，fp3，fp4之后再加fp2
        $('.fp').eq(a-1).removeClass('fp');
        $('.cs').eq(a-1).removeClass('fp1');
        $('.cs').eq(a-1).removeClass('fp2');
        $('.cs').eq(a-1).removeClass('fp3');
        $('.cs').eq(a-1).removeClass('fp4');
        $('.cs').eq(a-1).addClass('fp1');//下标是a-1的演员移除fp，fp1，fp2，fp3，fp4之后再加fp4
        a--;
      }
      console.log(a,pd);
    })
    $('.btn').eq(0).click(function(){
      if(a>5){
        a=0;
      }
      if(pd==2){
        if(a==4){
          $('.cs').eq(a).removeClass('fp1');
          $('.cs').eq(a).removeClass('fp2');
          $('.cs').eq(a).removeClass('fp3');
          $('.cs').eq(a).removeClass('fp4');
          $('.cs').eq(a).addClass('fp3');//下标是a的演员移除fp1，fp2，fp3，fp4之后再加fp3
          $('.cs').eq(0).removeClass('fp1');
          $('.cs').eq(0).removeClass('fp2');
          $('.cs').eq(0).removeClass('fp3');
          $('.cs').eq(0).removeClass('fp4');
          $('.cs').eq(0).addClass('fp4');//下标是0的演员移除fp1，fp2，fp3，fp4之后再加fp4
        }
        $('.cs').eq(a).removeClass('fp1');
        $('.cs').eq(a).removeClass('fp2');
        $('.cs').eq(a).removeClass('fp3');
        $('.cs').eq(a).removeClass('fp4');
        $('.cs').eq(a).addClass('fp3');//下标是a的演员移除fp1，fp2，fp3，fp4之后再加fp3
        $('.cs').eq(a 1).removeClass('fp1');
        $('.cs').eq(a 1).removeClass('fp2');
        $('.cs').eq(a 1).removeClass('fp3');
        $('.cs').eq(a 1).removeClass('fp4');
        $('.cs').eq(a 1).addClass('fp4');//下标是a 1的演员移除fp1，fp2，fp3，fp4之后再加fp4
        a  ;
      }
      //console.log(a,pd);
    })

4.旋转木马

按键盘方向键就会旋转

html

<div class=bigbox>
  <div class="box">
  </div>
</div>

bigbox是摄像头，box是舞台，舞台里的演员我将用js渲染，class为mian

css

.bigbox{ width:150px; height:100px; margin:200px auto; perspective:800px; transform-style:preserve-3d; }
.box{ transform-style:preserve-3d; position:relative; width:150px; height:100px; }
.mian{ width:150px; height:100px; position:absolute; text-align:center; color:#fff; background:#ff3efb; line-height:100px; font-size:80px; }
.box{ transition:transform 1s; }

同上一案例我把图片不一样的数字声明在sum数组里

js

    var sum=[1,2,3,4,5,4,3,1,2];
    for(var i=0;i<9;i  ){
      $('.box').append('<div class="mian"></div>');
      $('.mian').eq(i).css({'transform':'rotateY(' i*40 'deg) translateZ(240px)','background':'url(img/dome06' sum[i] '.jpg)','background-size':'100% 100%'});
    }
    //上边的for循环是渲染舞台里演员
    var x=0;
    var y=0;
    $(window).keydown(function(event){
      var e = event || window.event || arguments.callee.caller.arguments[0];
      console.log(e)
      if(e && e.keyCode==37){ // 左
        y  ;
        $('.box').css({'transform':"rotateX(" x*20 "deg) rotateY(" y*40 "deg)"});
      }
      if(e && e.keyCode==39){ // 右
          y--;
          $('.box').css({'transform':"rotateX(" x*20 "deg) rotateY(" y*40 "deg)"});
      }
      if(e && e.keyCode==38){ // 上
          x  ;
          $('.box').css({'transform':"rotateX(" x*20 "deg) rotateY(" y*40 "deg)"});
      }
      if(e && e.keyCode==40){ // 下
          x--;
          $('.box').css({'transform':"rotateX(" x*20 "deg) rotateY(" y*40 "deg)"});
      }
    })
    //这段是写按下方向键舞台旋转，上边声明的x，y是舞台的x轴与y轴的角度数，event是记录事件信息的对象，e.keyCode是按下时键盘的键值。

5.魔方效果

html

<div class="bigbox">
    <input type="button" class="btn" value="<"/>
    <div class="box"></div>
    <input type="button" class="btn" value=">"/>
</div>

bigbox是摄像头，box是舞台，舞台里的演员我将用js渲染，class为kuai和mian

css

html,body{ background:#ff9f96; }
.bigbox{ width:900px; height:300px; margin:100px auto 0; }
.box{ width:604px; height:250px; transform-style:preserve-3d; perspective:800px; float:left; margin-left:103px; }
.btn{ height:40px; width:50px; color:#fff; background:#f5ff32; margin-top:105px; border:0px; font-size:30px; font-weight:700; }
.btn:nth-of-type(1){ float:left; }
.btn:nth-of-type(2){ float:right; }
.kuai{ float:left; width:100px; height:250px; transform-style:preserve-3d; position:relative; margin-left:-1px; }
.mian{ width:100px; height:250px; position:absolute; }
.kuai .mian:nth-of-type(1){ transform:translateZ(125px); background:url(../img/dome061.jpg) no-repeat; background-size:600px 250px; }
.kuai .mian:nth-of-type(2){ transform:rotateX(-90deg) translateZ(125px); background:url(../img/dome062.jpg) no-repeat; background-size:600px 250px; }
.kuai .mian:nth-of-type(3){ transform:rotateX(180deg) translateZ(125px); background:url(../img/dome063.jpg) no-repeat; background-size:600px 250px; }
.kuai .mian:nth-of-type(4){ transform:rotateX(90deg) translateZ(125px); background:url(../img/dome064.jpg) no-repeat; background-size:600px 250px; }
.kuai .mian:nth-of-type(5){ width:250px; height:250px; background:#000; transform:rotateY(-90deg) translateZ(125px); }
.kuai .mian:nth-of-type(6){ width:250px; height:250px; background:#000; transform:rotateY(90deg) translateZ(-25px); }

js

var kuai=document.getElementsByClassName('kuai');
  for(i=0;i<6;i  ){
    $('.box').append('<div class="kuai"><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div>' 
    '<div class="mian"></div><div class="mian"></div></div>');
    kuai[i].getElementsByClassName('mian')[0].style='background-position:' -100*i 'px 0px';
    kuai[i].getElementsByClassName('mian')[1].style='background-position:' -100*i 'px 0px';
    kuai[i].getElementsByClassName('mian')[2].style='background-position:' -100*i 'px 0px';
    kuai[i].getElementsByClassName('mian')[3].style='background-position:' -100*i 'px 0px';
  }
  //上边的for循环是渲染舞台里演员
  var x=0;
  var xuanzuan=setInterval(function(){
    x  ;
    for(i=0;i<6;i  ){
      for(i=0;i<6;i  ){
        kuai[i].style='transition:transform 1s ' 100*i 'ms;transform:rotateX(' 90*x 'deg)';
      }
    }
  },4000)
  //上边的计时器是写让class是kuai的div旋转这个div的下标是几就让他延迟几毫秒
  $('.btn').eq(0).click(function(){
    x--;
    for(i=0;i<6;i  ){
      kuai[i].style='transition:transform 1s ' 100*i 'ms;transform:rotateX(' 90*x 'deg)'
    }
  })
  //按下第一个按钮让class是kuai的div以上边计时器的方式运动不过方向相反
  $('.btn').eq(1).click(function(){
    x  ;
    for(i=0;i<6;i  ){
      kuai[i].style='transition:transform 1s ' 100*i 'ms;transform:rotateX(' 90*x 'deg)'
    }
  })
  //按下第二个按钮让class是kuai的div以上边计时器的方式运动

6.多个立方体反转

html

<div class="box"></div>

box是摄像头，舞台里的演员我将用js渲染，class为kuai和mian

css

html,body{ height:100%; background:#afff60; }
.box{ width:610px; height:610px; transform-style:preserve-3d; perspective:800px; margin:50px auto 0; }
.kuai{ float:left; width:100px; height:100px; transform-style:preserve-3d; position:relative; margin:10px; }
.mian{ width:100px; height:100px; position:absolute; font-size:60px; font-weight:700; color:#00f0ff; line-height:100px; text-align:center; }
.kuai .mian:nth-of-type(1){ transform:translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(2){ transform:rotateX(-90deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(3){ transform:rotateX(180deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(4){ transform:rotateX(90deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(5){ transform:rotateY(-90deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(6){ transform:rotateY(90deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }

js

for(i=0;i<20;i  ){
    $('.box').append('<div class="kuai"><div class="mian">' i '</div><div class="mian"></div><div class="mian"></div><div class="mian"></div>' 
    '<div class="mian"></div><div class="mian"></div></div>');
    //上边一段是渲染舞台和演员
    $('.kuai').eq(i).mouseover(function(){
      $(this).attr('style','transition:transform 0.1s;transform:translateZ(100px) rotateY(180deg);');
    })
    //当鼠标移到class为kuai的div上时他先沿着z轴向前走100px，再沿着y轴旋转180°
    $('.kuai').eq(i).mouseout(function(){
      $(this).attr('style','transition:transform 0.1s;transform:rotateY(0deg) translateZ(0px);');
    })
    当鼠标移下class为kuai的div上时他先沿着z轴向前走回0px位置，再沿着y轴旋转回0°
    $(window).eq(i).mousemove(function(event){
      var e = event || window.event || arguments.callee.caller.arguments[0];
      var xjd;
      var yjd;
      if(e.clientX>674){
        xjd=parseInt(e.clientX/80);
      }else{
        xjd=parseInt(-17 e.clientX/40);
      }
      if(e.clientY>330){
        yjd=parseInt(e.clientY/-66);
      }else{
        yjd=parseInt(11-e.clientY/33);
      }
      $('.box').attr('style','transform:rotateY(' xjd 'deg) rotateX(' yjd 'deg)')
    })
  }
  //这段是写box随着鼠标移动而变化
  • 此文为原创，转载请注明出处：https://i.cnblogs.com/EditPosts.aspx?postid=6385775&update=1
南京闫伟亮的野爹
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
20个CSS3动画实战案例开发
06-18
本套课程，大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战，让小伙伴们能够轻松上手，企业公司项目开发过程中遇到的页面动画交互效果需求实现，以及一些更加炫酷创意动画想法的实现，成为一名酷酷哒前端开发工程师。 本课程为20套CSS3动画实战课程，所集合构成的一套实战课程。适合热爱前端动画的小伙伴们，课程的主要内容包括： 01.3D文字效果制作、02.雪花飘落效果、03.图文模糊效果、04.文字卡片折叠效果、05.六角形效果、06.?进度条颜色跟随效果、07.?动态视频背景效果、08.?按键文字跳动效果、09.?弹跳小球效果、10. 3D翻折菜单导航效果、11. 3D圆环层叠动画效果、12.?水波浪球起伏效果、13.?遮罩透明滤镜文字效果、14.?阴阳无极八卦阵效果、15.?文字双屏进入进出效果、16.?炫酷光影加载效果、17.?文字背景水波浪效果、18.?炫酷发光倒影按钮、19.?扁平预加载动画效果、20.?烟囱冒烟动画效果
2024年前端最全CSS3基础之3D转换，web前端秘籍
最新发布
2401_84447149的博客
05-06 938
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
【CSS3】CSS3 3D 转换 ① ( CSS3 3D 转换简介 | 3D 物体与 2D 物体区别 | 3D 空间坐标系 | 常用的 3D 转换属性 | 3D 位移转换语法 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-11 1634
一、CSS3 3D 转换简介 1、3D 物体与 2D 物体区别 2、2D 平面坐标系 3、3D 空间坐标系 4、常用的 3D 转换属性 二、3D 位移转换 1、3D 位移转换语法 2、代码示例分析 三、代码示例
CSS3新特性之animation动画、3D转换(含两面翻转的盒子案例、swiper插件)、浏览器私有前缀
Bulut0907
02-19 1918
近大远小物体后面遮挡不可见x轴：水平向右。注意： x右边是正值，左边是负值y轴：垂直向下。注意： y下面是正值，上面是负值z轴：垂直屏幕。注意： 往外面是正值，往里面是负值。
CSS3（前端案例）
weixin_55765992的博客
07-31 157
css3新特性 （文章转载自乐字节） 圆角 使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。 border-top-left-radius:10px; border-top-right-radius:6px; border-bottom-left-radius:8px; border-bottom-right-radius:12px border-radius:10px 6px 8px 12px; border-radius:10px 6px 8px; border-r
css 3d浅析
Y0admin的博客
05-28 166
3d transform的坐标系统 我们很熟悉的网页是平面的，一个DOM元素，比如一个``，它会有一个初始坐标系（initial coordinate system）： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eFx96dic-1622190982112)(http://acgtofe.com/assets/used-images/posts/201512/initial_coordinate_system.png)] 每一个DOM元素都有一个这样的初始坐标系。其中，原
CSS3 3D制作实战案例分析
12-09
同时也欢迎各位小伙伴对文中的错误给予指正 二、入门案例分析 这里先说一说我的规划，我打算先从入门级的案例入手，然后依次递推，最后要达到的效果是，理解完所有的例子的设计思路，基本上CSS3-3D制作就能够...
CSS3 3D柱形统计图表
11-24
"CSS3 3D柱形统计图表"是一个利用CSS3的强大功能来创建具有立体感的柱状图的实践案例。这种图表在数据可视化和信息展示中非常常见，尤其适用于呈现比较和分析不同类别的数据。 首先，我们需要理解CSS3中的3D转换。...
CSS3卡通3D空间卧室图形特效
07-24
6. **动画与过渡**：CSS3的transition和animation属性使得元素在状态改变时可以平滑过渡，为卧室场景增添动态效果，如开门、开灯等交互。 7. **响应式设计**：考虑到不同设备的屏幕尺寸，使用媒体查询（media ...
3d旋转相册—css3高级进阶
04-13
通过学习并实践这个"3d旋转相册"案例，你不仅能够掌握CSS3的高级特性，还能提升自己的前端开发能力，为你的作品集增添一项炫酷的展示。而提供的"3d旋转相册.html"文件则是你动手实践的起点，从中你可以分析代码，...
【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-11 5593
一、" 透视 " 概念简介 1、" 透视 " 概念引入 2、视距与成像关系 二、CSS3 中 " 透视 " 属性设置 1、" 透视 " 语法设置 2、代码示例 - " 透视 " 语法设置 添加了透视后的代码示例 执行结果
web前端入门——CSS3-3D技术详解及案例
L3gacy
04-06 1354
CSS3-3D技术 景深 生活中的3d 区别于2d的地方 1、近大远小 景深 程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显） perspective: 1200px;（在父元素中使用） transform:perspective(1200px) （在子元素中使用） 两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间...
css3 3D 转换 技巧详细解析与代码实例
猿码互联
10-24 1646
CSS3 3D转换是CSS3中的一项新特性，通过它我们可以比较容易地实现3D效果。在这里，我将向大家介绍CSS3 3D转换的一些基本概念、使用方法和常见技巧。
html css js优秀案例,50个强大璀璨的CSS3/JS技术运用实例
weixin_39775577的博客
06-22 474
50个强大璀璨的CSS3/JS技术运用实例发布时间：2010-02-27 15:42:11 作者：佚名 我要评论50例强大璀璨的CSS3/JS 技术运用。CSS3来了。虽然支持的浏览器很有限，但 许多设计师都在实验它的强大功能。本文可以让你了解css3的新技术和功能。50例强大璀璨的CSS3/JS 技术运用。CSS3来了。虽然支持的浏览器很有限，但许多设计师都在实验它的强大功能。本文可以...
CSS3 3D转换和旋转木马案例
qq_44757223的博客
04-01 762
3D移动、透视、旋转、呈现、浏览器私有前缀及相关案例
CSS3之3D变换实例详解
weixin_33853827的博客
08-27 134
CSS3的3D效果很赞，本文实现简单的两种3D翻转效果。首先看效果和源代码，文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀，请视情况自行添加（自动化时代推荐使用其他的一些方法，如gulp-autoprefixer插件，因为本人更喜欢gulp #_#） 还有w3school上面的这句话早已经过时： 目前为止，现代浏览器基本都支持无前缀的3D变换的相关属性（除了IE，以及...
css3实例小项目,CSS3实现小案例
weixin_35588980的博客
08-03 370
今天在学习一些css3的属性，其中比较有意思的就是transform和backface-visibility。transform属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。我相信大家对translate和rotate以及scale是比较熟悉的。它们分别实现平移，旋转和缩放功能。但是今天我们用到的是skew属性，它可以实现倾斜转换。backface-visibility属性定义当元素不面向...
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
qq_45687086的博客
05-17 3931
各位读者大家好，我是一只小菜鸟。目前正在学习web前端方面的相关知识.，这也是小菜鸟第一次写博客。写的有哪里不对的地方欢迎各位指正。 本篇文章内容就是利用HTML简单的布局再加上CSS3的动画效果做出一个立体旋转的照片墙。效果如下图 ...
HTML5、CSS3与JavaScript开发Windows 8应用指南
《微软出版社编程Windows 8应用指南：HTML5、CSS3与JavaScript》是一本专为IT专业人士和开发者编写的实用教程。该书由Microsoft Press出版，版权归属于2012年的Microsoft Corporation，享有所有权利，未经书面许可，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值