CSS3 Tranform 3D 的應用
阿新 • • 發佈：2018-03-05
ase strong display hid tez /word 視圖 位置 查看
CSS3 Tranform 3D 的應用
一、perspective 屬性
1. 作用：
設置元素被查看位置的視圖，類似於眼睛到屏幕的距離，一般跟 perspective-origin 共同作用在一個父元素上
屬性值 = 屏幕分辯率 * 屏幕和我們眼睛的距離
當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身
perspective 屬性只影響 3D 轉換元素
2. 作用範圍
- 舞臺效果： 作用在 transform 屬性元素的父元素上，裏面的元素都會受到改屬性的影響，而且顯示的效果跟子元素在父元素的位置有關系。
perspective: 200px
- 單個元素：和 transform 屬性 共同作用在同一元素中：
transform: perspective(500px) rotateY(45deg);
二、transform 屬性
1. 屬性：
- translateZ: 元素向著它朝的方向（也就是其經過rotate之後） “走出去” 的距離
- rotateX( xx deg)
- rotateY( xx deg)
- rotateZ( xx deg)
- ...
三、perspective-origin 屬性
1. 作用
設置 3D 元素的基點位置（也就是我們眼睛看的位置），默認就是所看舞臺或元素的中心
perspective-origin: 25% 75%;四、transform-style
1. 作用
利用該屬性可以使被轉換的子元素
transform-style: preserve-3d / flat五、backface-visibility
1. 作用
該屬性定義當元素不面向屏幕時（前面有3d元素擋住時）是否可見，可以想象各個面連成一個實體的形狀，後面的面會被前面的面擋住看不見。
backface-visibility : hidden / visible;- 為每個面設置 backface-visibility: visible，默認值就是 visible
- 為每個面設置 backface-visibility: hidden
?
六、例子
<body>
<div .hidebf div {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.showbf div {
backface-visibility: visible;
-webkit-backface-visibility: visible;
}
.center{
margin: auto;
margin-top: 100px;
width: 80%;
height: 300px;
border: 1px solid;
perspective: 200px; /* prespective 和 perspective-origin 一般一起在外層元素上使用 */
perspective-origin: 50% 5%; /* **** */
}
.cube {
width: 100px;
height: 100px;
margin: auto;
margin-top: 100px;
transform-style: preserve-3d; /* 讓多個子元素之間的 3D 關系像我們想象一樣呈現 */
transition: 1s ease;
transform: rotateY(0deg); /* 改變角度看 */
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(80px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(80px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(80px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(80px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(80px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(80px);
}上面如果把 div class="cube" 的元素旋轉 rotateY(30deg) 其效果如下：
但是如果把 prespective 從 cube 的父元素移到 cube 上，其旋轉效果如下：
參考：
好吧，CSS3 3D transform變換，不過如此！
註意
轉載、引用，但請標明作者和原文地址
CSS3 Tranform 3D 的應用