zoukankan      html  css  js  c++  java
  • 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有一个初步的了解,并能根据这些基础知识制作出自己需要的效果。

    作者:大鹏哥
  • 相关阅读:
    强化学习的基本迭代方法
    基于文本描述的事务聚类
    学习强化学习之前需要掌握的3种技能
    其它 华硕 ASAU S4100U 系统安装 win10安装 重装系统 Invalid Partition Table 解决
    数据分析 一些基本的知识
    Python 取样式的内容 合并多个文件的样式 自定义样式
    电商 Python 生成补单公司需要的评论格式3
    SpringBlade 本地图片上传 生成缩略图
    SQL Server 字符串截取
    SpringBlade 本地图片上传
  • 原文地址:https://www.cnblogs.com/da-pengge/p/6385565.html
Copyright © 2011-2022 走看看