CSS 3D 基础知识

css3d 总结

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

基础知识

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

(1) 坐标 x y z

(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找到轴心位置）

完毕 希望大家看到这篇文章后能够学到知识。