css 3d 基础知识

css3d 总结

3d transform (3d变形)（rotate skew scale translate）

基础知识

perspective (视距,景深) perspective-origin (视点)
transfrom

(1) 坐标 x y z

医院网站系统

HTML医院网站系统基于PHP+MYSQL开发，在文章内容网站的基础上，预设了医院概况、新闻动态、环境设备、名医荟萃、专科介绍、就医指南、专家门诊值班表、网上挂号、医疗保健知识、在线咨询等医院网站常用的栏目和测试数据，采用适合医院网站的专用模版，增强了系统的针对性和易用性。系统具有文章、图文、下载、社区、表单、用户等基本系统模块和一系列网站辅助功能，用户也可根据自身特点任意创建和修改栏目，适合创建

下载

(2) 变形 基点位置 transform-origin
(3)transfrom-style：preserve-3d

立即学习“前端免费学习笔记（深入）”；

3D旋转图片相册

3d transform (3d变形)（rotate skew scale translate）

基础知识

perspective (视距,景深) perspective-origin (视点)
transfrom

(1) 坐标 x y z

(2) 变形 基点位置 transform-origin
(3)transfrom-style：preserve-3d

立即学习“前端免费学习笔记（深入）”；

3D旋转图片相册

它就用到了一个比较简单的坐标y 轴旋转那咱们看一下他的代码

html的代码：

  

    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
    
@@##@@
  

首先要建九个盒子放九张图片，这个很容易理解的。

css的代码

          body{
            background: #6daf39;（背景加了个颜色 主要是好看）
          }
          .xj{
          perspective:600px;（这是井深）
          }
          .kj{
          transition: 1s;（运动时间）
          transform-style:preserve-3d;（实现3d效果 当然这是非常重的）
          width:200px;
          height: 300px;
          margin:80px auto;
          position: relative;
          transform: rotateY(0deg) rotateX(0deg) translateZ(-275px);
          transform-origin: center center -275px;
          }

      .mian{
        position:absolute;
        font-size: 50px;
        color:#fff;
        text-align: center;
        line-height: 300px;
      }
      .mian:nth-child(1){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(0deg)translateZ(275px);
      }
      .mian:nth-child(2){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(40deg)translateZ(275px);
      }
      .mian:nth-child(3){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(80deg)translateZ(275px);
      }
      .mian:nth-child(4){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(120deg)translateZ(275px);
      }
      .mian:nth-child(5){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(160deg)translateZ(275px);
      }
      .mian:nth-child(6){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(200deg)translateZ(275px);
      }
      .mian:nth-child(7){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(240deg)translateZ(275px);
      }
      .mian:nth-child(8){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(280deg)translateZ(275px);
      }
      .mian:nth-child(9){
        width:200px;
        height: 300px;
        background: #ff2223;
        transform: rotateY(320deg)translateZ(275px);
      }

css就到这里，很简单的;

js的代码

    kj.onclick=function () {
      cishu++;
      var jiaodu=40*cishu;


      kj.style.transform="rotateY("+jiaodu+"deg)translateZ(-275px)"
    }

（kj）就是3d空间，点击kj要是一种效果，就要有一种方法或步骤；
3d空间样式rotateY（这就是上下轴旋转）translateZ（Z这就是3d立体字轴；让3d空间后移275px找到轴心位置）

更多css 3d  基础知识 相关文章请关注PHP中文网！