CSS3 3D变换
使用3D变换时要加上内核(-ms-:IE内核 / -webkit-:Safari 和 Chrome内核 / -moz- :Firefox 内核 / -o-: Opera 内核)
使用
3D变换 步骤:
1.transform-style:
preserve-3d // 建立3D空间
2. 设置景深 perspective:100px; // 有近大远小的感觉 ,
距离我看他的地方
示例:
.box{width:100px;height:100px;padding:100px;border:5px solid #000;margin:30px auto;-webkit-transform-style:preserve-3d;-webkit-perspective:100px; } // 建立3D空间 ,设置景深
.div1{width:100px;height:100px;background:red;transition:1s;} // 加个过渡
.box:hover .div1{-webkit-transform:rotateX(180deg)} // X轴旋转180度
3.
perspective-origin 设置景深的基点
就是你站在什么方位去看这盒子
示例:
-webkit-perspective-origin:left top // 左上角观看
transform 下新增函数
1.rotateX(
180deg
) -->> X轴
旋转
2.rotateY(180deg)
-->> Y
轴
旋转
3.rotateZ(180deg)
-->> Z
轴
旋转 Z轴就是电脑屏幕的
4.translateZ(100px)
-->>
Z
轴的移动 (离自己近感觉变大了,离自己远感觉变小了)可以是负值,和景深的值一起调试
5.scaleZ()
-->>
示例:旋转的盒子
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
.wrap{width:100px;height:100px;padding:100px;border:5px solid #000;margin:100px auto;-webkit-perspective:200px;/*-webkit-perspective-origin:left top */}
.box{width:100px;height:100px;background:red;position:relative;-webkit-transform-style:preserve-3d;transition:2s;-webkit-transform-origin:center center -50px;}
.box div{width:100px;height:100px;position:absolute;font-size:50px;text-align:center;line-height:100px;}
.box div:nth-of-type(1){background:#9c0;left:0;top:-100px;-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg)}
.box div:nth-of-type(2){background:#CF3;left:-100px;top:0;-webkit-transform-origin:right;-webkit-transform:rotateY(-90deg)}
.box div:nth-of-type(3){background:#CCF;left:0;top:0;}
.box div:nth-of-type(4){background:#0c9;left:0;top:100px;-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg)}
.box div:nth-of-type(5){background:#0c9;left:100PX;top:0;-webkit-transform-origin:left;-webkit-transform:rotateY(90deg)}
.box div:nth-of-type(6){background:#f0c;left:0;top:0;-webkit-transform:translateZ(-100px) rotateX(180deg);}
.wrap:hover .box{-webkit-transform:rotateX(720deg)}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>