接上一篇
5、perspective 設置透視距離
6、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設置三維移動
8、rotateX、rotateY、rotateZ 設置三維旋轉
9、scaleX、scaleY、scaleZ 設置三維縮放
10、tranform-origin 設置變形的中心點
11、backface-visibility 設置盒子背面是否可見（默認可見）
例1、鼠標移動後翻面效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片翻面</title>
<style type="text/css">
.con{
width:300px;
height:272px;
margin:100px auto 0;
position:relative;
transform: rotateY(0deg);
}
.pic,.info{
width:300px;
height:272px;
position:absolute;
left:0;
top:0;
backface-visibility:hidden;
transform:perspective(800px) rotateY(0deg);
/*設置過渡效果*/
transition:all 500ms ease;
}
.info{
background-color:gold;
text-align:center;
line-height:272px;
transform:translateZ(2px) rotateY(180deg);
}
.con:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.con:hover .info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="con">
<div class="pic"><img src="images/location_bg.jpg"></div>
<div class="info">圖片文字說明</div>
</div>
</body>
</html>
例子2 正方體1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轉換模塊-正方體</title>
<style>
*{
margin: 0;
padding: 0;
/*去除默認邊距*/
}
ul{
width: 200px;
height: 200px;
/*border: 1px solid #000;*/
box-sizing: border-box;
margin: 100px auto;
position: relative;
/*修改基本樣式*/
transform: rotateY(45deg) rotateX(45deg);
/*旋轉看看效果*/
transform-style: preserve-3d;
/*將父元素設置爲3d空間*/
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
/*修改基本樣式*/
}
ul li:nth-child(1){
background-color: red;
transform: translateX(-100px) rotateY(90deg);
/*將第一個l向左移動100像素，然後繞y軸旋轉90度，形成左邊的面*/
}
ul li:nth-child(2){
background-color: green;
transform: translateX(100px) rotateY(90deg);
/*將第一個2向右移動100像素，然後繞y軸旋轉90度*，形成右邊的面*/
}
ul li:nth-child(3){
background-color: blue;
transform: translateY(-100px) rotateX(90deg);
/*將第一個3向上移動100像素，然後繞x軸旋轉90度，形成上面的面*/
}
ul li:nth-child(4){
background-color: yellow;
transform: translateY(100px) rotateX(90deg);
/*將第一個4向下移動100像素，然後繞x軸旋轉90度*/
}
ul li:nth-child(5){
background-color: purple;
transform: translateZ(-100px);
/*將第一個5向後移動100像素，形成後面的面*/
}
ul li:nth-child(6){
background-color: pink;
transform: translateZ(100px);
/*將第一個l向前移動100像素，形成前面的面*/
}
</style>
</head>
<body>
<ul>
<!--首先做好html佈局，正方體有6個面，所以寫了6個li-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
例子3 正方體2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
/*修改基本樣式*/
}
.div1{
margin-top: 100px;
transform: perspective(400px) rotateX(0deg) rotateY(0deg);
/*擁有近大遠小透視效果*/
transform-style: preserve-3d;
/*設置爲3d空間*/
position: relative;
/*border:1px solid #000000;*/
animation: xuanzhuan 1s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
/*旋轉動畫*/
}
.div1 div{
position: absolute;
font-size: 80px;
line-height: 200px;
text-align: center;
top: 0;
left: 0;
/*內部樣式*/
}
.div1_1{
transform: translateZ(100px);
background-color: red;
/*向前移動100像素，作爲最前面的面*/
}
.div1_2{
transform: rotateX(90deg) translateZ(100px);
background-color:green;
/*繞x軸旋轉90度，在z軸正方向移動100像素，作爲上面的面*/
/*注：旋轉時座標系會跟着一起旋轉，z軸原來是垂直屏幕向外的，繞x軸旋轉90度以後就是在屏幕上向上的方向*/
}
.div1_3{
transform: rotateX(180deg) translateZ(100px);
background-color: blue;
/*繞x軸旋轉180度，這時z軸垂直屏幕向內，在z軸正方向移動100像素，作爲後面的面*/
}
.div1_4{
transform: rotateX(270deg) translateZ(100px);
background-color: purple;
/*繞x軸旋轉270度，這時z軸向下，在z軸正方向移動100像素，作爲下面的面*/
}
.div1_5{
transform: rotateY(90deg) translateZ(100px);
background-color: pink;
/*繞y軸旋轉90度，這時z軸向右，在z軸正方向移動100像素，作爲右面的面*/
}
.div1_6{
transform: rotateY(270deg) translateZ(100px);
background-color: yellow;
/*繞y軸旋轉90度，這時z軸向左，在z軸正方向移動100像素，作爲左面的面*/
}
@-webkit-keyframes xuanzhuan{
from{
transform:perspective(400px) rotateX(0deg);
}
to{
transform:perspective(400px) rotateX(360deg);
}
}
.div1:hover{
transform: perspective(400px) scale(1.5);
animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
/*有hover事件是動畫暫停*/
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">1</div>
<div class="div1_2">2</div>
<div class="div1_3">3</div>
<div class="div1_4">4</div>
<div class="div1_5">5</div>
<div class="div1_6">6</div>
</div>
<!--html標籤佈局-->
</body>
</html>
例子4柱形（豎）（特別注意Z軸移動的距離）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 160px;
height: 300px;
margin: 0 auto;
/*修改基本樣式*/
}
.div1{
margin-top: 100px;
transform: rotateX(0deg) rotateY(0deg);
/*擁有近大遠小透視效果*/
transform-style: preserve-3d;
/*設置爲3d空間*/
position: relative;
/*border:1px solid #000000;*/
animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards;
/*旋轉動畫*/
}
.div1 div{
position: absolute;
font-size: 80px;
line-height: 300px;
text-align: center;
top: 0;
left: 0;
overflow: hidden;
/*內部樣式*/
}
.div1_1{
transform: rotateY(0deg)translateZ(46px);
background-color: red;
/*向前移動46像素，作爲最前面的面*/
}
.div1_2{
transform: rotateY(120deg) translateZ(46px);
background-color:green;
/*繞Y軸旋轉120度，在z軸正方向移動46像素，作爲右邊的面*/
}
.div1_3{
transform: rotateY(240deg) translateZ(46px);
background-color: blue;
/*繞Y軸旋轉240度，*/
}
@-webkit-keyframes xuanzhuan{
0% {
transform: perspective(400px) rotateY(0deg);
}
50%{
transform: perspective(400px)rotateY(120deg);
}
100%{
transform: perspective(400px) rotateY(360deg);
}
}
/* .div1:hover{
transform: perspective(400px) scale(1.5);
animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite paused forwards;
/*有hover事件是動畫暫停*/
}*/
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">1</div>
<div class="div1_2">2</div>
<div class="div1_3">3</div>
</div>
<!--html標籤佈局-->
</body>
</html>
