3D變換,3個(gè)屬性
- transform-style: prevserve-3d ;建立3D空間，必須是父元素,運(yùn)動(dòng)的元素沒法建立
- perspective:數(shù)字 景深
- perspective-origin 景深基點(diǎn): 視線是從哪個(gè)方向看過去的
- transform : 新增函數(shù)
- rotateX() 旋轉(zhuǎn)X軸 類似單杠
- rotateY() 旋轉(zhuǎn)Y軸 類似鋼管舞
- rotateZ() 旋轉(zhuǎn)Z軸 類似水平翻轉(zhuǎn)
- translateZ() 位移Z軸，簡(jiǎn)單來(lái)說就是近大遠(yuǎn)小
- scaleZ() 放大
這里特別提醒用了3D空間必須加相對(duì)定位
圍繞X軸旋轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>3D旋轉(zhuǎn)</title>
</head>
<style>
*{margin:0px;padding:0px;}
h1{margin:10px auto;position:absolute;left:50%;top:0px;-webkit-transform: translate(-50%,0);}
div{width:100px;height:100px;padding:100px;border:10px solid black;-webkit-perspective: 50px;-webkit-transform-style: preserve-3d;}
p{width:100px;height:100px;background:red;transition: 2s;}
div:hover p {
-webkit-transform: rotateX(180deg);
}
</style>
<body>
<h1>鼠標(biāo)放到框子上面就會(huì)變形</h1>
<div>
<p>
</p>
</div>
</body>
</html>
效果圖
圍繞X軸旋轉(zhuǎn).gif
繞Y軸旋轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>繞Y軸旋轉(zhuǎn)</title>
</head>
<style>
*{margin:0px;padding:0px;}
div{width:100px;height:100px;padding: 100px;border:10px solid blanchedalmond;-webkit-transform-style: preserve-3d;-webkit-perspective: 100px;margin:0 auto;}
p{width:100px;height:100px;background:red;transition: 2s;line-height:100px;text-align:center;}
p span{transition: 1s;}
div:hover p{-webkit-transform: rotateY(180deg) ;}
div:hover p span{-webkit-transform: rotateY(-180deg) ;display:block;}
</style>
<body>
<div>
<p>
<span>2</span>
</p>
</div>
<!--小提示要是里面的文字不轉(zhuǎn)的話可以給里面的文字設(shè)定一個(gè)包裹層這樣也旋轉(zhuǎn)了-->
</body>
</html>
效果圖
圍繞y軸旋轉(zhuǎn).gif
繞Z軸旋轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>TranslateZ</title>
</head>
<style>
*{margin:0px;padding:0px;}
div{width:100px;height:100px;padding:100px;margin:0 auto;border:10px solid #ccc;-webkit-perspective: 100px;-webkit-transform-style: preserve-3d;}
p{width:100px;height:100px;background:red;transition: 2s;}
div:hover p {-webkit-transform: translateZ(-100px);}
</style>
<body>
<div>
<p>
1
</p>
</div>
</body>
</html>
效果圖 近大遠(yuǎn)小
圍繞Z軸旋轉(zhuǎn).gif
