先上一道菜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
position: relative;
top: 150px;
left: 600px;
-webkit-transform-style: preserve-3d;
-webkit-transform:rotateX(-10deg) rotateY(400deg);
-webkit-transform-origin: 100px 100px;
-webkit-transition: all 5s;
} #box:hover {
-webkit-transform:rotateX(-10deg) rotateY(0deg); } img {
width: 200px;
height: 200px;
position: absolute;
-webkit-transition: all 3s;
} .img1 {
-webkit-transform: rotateY(0deg) translateZ(180px);
} .img2 {
-webkit-transform: rotateY(60deg) translateZ(180px);
} .img3 {
-webkit-transform: rotateY(120deg) translateZ(180px);
} .img4 {
-webkit-transform: rotateY(180deg) translateZ(180px);
} .img5 {
-webkit-transform: rotateY(240deg) translateZ(180px);
} .img6 {
-webkit-transform: rotateY(300deg) translateZ(180px);
}
</style>
</head>
<body>
<div id="box">
<img src="1.jpg" class="img1 ">
<img src="2.jpg" class="img2 ">
<img src="3.jpg" class="img3 ">
<img src="4.jpg" class="img4 ">
<img src="5.jpg" class="img5 ">
<img src="6.jpg" class="img6 ">
</div>
</body>
</html>
效果：
炫的刁炸天 有木有
另外一个效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
position: relative;
top: 300px;
left: 400px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-15deg) rotateY(-15deg);
-webkit-transform-origin: 100px 100px;
-webkit-transition: all 5s;
/*perspective: 300px;*/
} #box:hover {
-webkit-transform: rotateX(360deg) rotateY(360deg);
-webkit-transform-origin: 100px 100px;
} .d {
position: absolute;
width: 200px;
height: 200px;
font-size: 96px;
line-height: 200px;
text-align: center;
color: black;
opacity: 0.6;
} #box div:nth-child(1) {
background: red;
} div:nth-child(2) {
background: blue;
-webkit-transform: rotateY(-90deg) translateZ(-100px) translateX(-100px);
} div:nth-child(3) {
background: yellow;
-webkit-transform: translateZ(-200px);
} div:nth-child(4) {
background: darkorange;
-webkit-transform: rotateY(90deg) translateZ(-100px) translateX(100px);
} div:nth-child(5) {
background: lawngreen;
-webkit-transform: rotateX(90deg) translateZ(-100px) translateY(-100px);
} div:nth-child(6) {
background: fuchsia;
-webkit-transform: rotateX(90deg) translateZ(100px) translateY(-100px);
} .dd {
position: absolute;
width: 400px;
height: 400px;
border: 2px solid;
border-radius: 50%;
} div:nth-child(7) {
border-color: #33b5e5;
-webkit-transform: translateZ(-100px) translateY(-100px) translateX(-100px);
} div:nth-child(8) {
border-color: #f65e3b;
-webkit-transform: rotateY(-90deg) translateZ(100px) translateY(-100px) translateX(-100px);
}
div:nth-child(9){
border-color: #9933cc;
-webkit-transform: rotateX(90deg) translateZ(100px) translateX(-100px) translateY(-100px);
}
</style>
</head>
<body>
<div id="box">
<div class="d">1</div>
<div class="d">2</div>
<div class="d">3</div>
<div class="d">4</div>
<div class="d">5</div>
<div class="d">6</div>
<div class="dd"></div>
<div class="dd"></div>
<div class="dd"></div>
</div>
</body>
</html>
好，下面正式开始讲，
前言，基础这里就不懂说了，只记下自己的感悟和理解
先看图：
这个就是css3中 3D的坐标轴（注意上方是y的负半轴）
先看下布置界面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#box {
position: relative;
top: 200px;
left: 500px; } .con1 {
position: absolute;
width: 200px;
height: 200px;
background: red;
text-align: center;
line-height: 200px;
font-size: 96px;
color: #1a7fdc;
}
</style>
</head>
<body>
<div id="box">
<div class="con1">1</div>
</div>
</body>
</html>
效果：
改装代码：
不说别的，先给#box添加以下代码transform-style: preserve-3d;意思是为其子元素保留3D效果
和transition: all 5s;使其有动画效果
最终代码：
#box {
position: relative;
top: 200px;
left: 500px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 5s;
-webkit-transition: all 5s;
}
开始设置con1的3D效果
代码修改为
.con1 {
position: absolute;
width: 200px;
height: 200px;
background: red;
text-align: center;
line-height: 200px;
font-size: 96px;
color: #1a7fdc;
transform: translateX(50px);
-webkit-transform: translateX(50px);
}
效果不多说，con1向右移动50px
如果改为
transform: translateY(50px);
con1会向下移动50px (注意这里不是向上)
改为
transform: translateZ(50px);
并不能看出效果，视觉本身就直着看这z轴，所以任何向Z轴上的移动，都看不出来
先看旋转整体图
这是沿着每个轴的默认旋转的方向，X,Z轴是顺时针，Y轴是逆时针。其实确切说Y轴也是顺时针，只不过转的是负半轴，视觉是逆时针而已
默认旋转基点是50% 50% 50%，可以通过transform-origin来改变
代码改为：
transform: rotateX(20deg);
效果是高度变小。其实是旋转了。
移动和旋转的结合，详情请看上面的第二个代码 。这里简要说理解。
1，transform:rotateX(20deg) translateX(100px)和 transform:translateX(100px) rotateX(20deg) 两者不同，因为旋转点变化了
2，旋转后，坐标轴也会跟着旋转。如代码
transform: rotateY(90deg) ;
坐标轴相应会改变为：
这时候如果再添加以下代码
transform: rotateY(90deg) translateX(100px) ;
图形会向前移动100px，而不是向右
吐槽，真的好难说明，感觉这个3D还是在于理解，不会的话可以自己做个骰子出来，就都会了。