從零開始的全棧工程師——CSS3( 2d,3d )
transform屬性
CSS3的變形(transform)屬性讓元素在一個坐標系統中變形。transform屬性的基本語法如下:
transform:none | <transform-function> [<transform-function>]*
2Dtransform常用的transform-function的功能:
translate():用來移動元素,可以根據X軸和Y軸坐標重新定位元素位置。在此基礎上有兩個擴展函數:translateX()和translateY()。
scale():用來縮小或放大元素,可以使用元素尺寸發生變化。在此基礎上有兩個擴展函數:scaleX()和scaleY()。
rotate():用來旋轉元素。
skew():用來讓元素傾斜。在此基礎上有兩個擴展函數:skewX()和skewY()。
matrix():定義矩陣變形,基於X軸和Y軸坐標重新定位元素位置。
3D transform常用的transform-function的功能:
translate3d():移動元素,用來指定一個3D變形移動位移量。
translatez():指定3D位移在Z軸的位移量。
scale3d():用來縮放一個元素。
scaleZ():指定Z軸的縮放向量。
rotate3d():指定元素具有一個三維旋轉的角度。
rotateX()、rotateY()和rotateZ():讓元素具有一個旋轉角度。
perspective():指定一個透視投影矩陣。
matrix3d():定義矩陣變形。
一些重要屬性:
transform-origin屬性指定元素的中心點在哪。後面增加了第三個數transform-origin-z,控制元素三維空間中心點。
perspective屬性相對於觀眾產生一個3D場景,看3D物體,眼睛到畫布的距離。 它需要應用到變形元素的祖先元素上。
perspective-origin為視點的位置。
backface-visibilty屬性用來設置背面的可見性。
設置transform-style的值為preserve-3d時,建立一個3D渲染環境。
參考博客:https://blog.csdn.net/xu_ya_fei/article/details/51684543
案例:利用transform來寫一個正方體
CSS:
body { -webkit-perspective: 500; }
.box { width: 100px; height: 100px; position: relative; margin: 100px auto 0; transform-style: preserve-3d; animation: flash 3s linear infinite; }
.box:hover > div:nth-of-type(1){ transform: translateZ(-200px); } .box:hover > div:nth-of-type(2){ transform: rotateX(90deg) translateZ(200px); } .box:hover > div:nth-of-type(3){ transform: rotateX(90deg) translateZ(-200px); } .box:hover > div:nth-of-type(4){ transform: rotateY(90deg) translateZ(200px); } .box:hover > div:nth-of-type(5){ transform: rotateY(90deg) translateZ(-200px); } .box:hover > div:nth-of-type(6){ transform: translateZ(200px); }
@keyframes flash { 0%{ transform: rotateX(0) rotateX(0); } 100%{ transform: rotate(360deg) rotateX(360deg); } }
.box>div { width: 100px; height: 100px; position: absolute; transition: all 1s; } .box>div:nth-of-type(1){ background: lightblue; } .box>div:nth-of-type(2){ background: lime; } .box>div:nth-of-type(3){ background: lightseagreen; } .box>div:nth-of-type(4){ background: orange; } .box>div:nth-of-type(5){ background: darkorchid; } .box>div:nth-of-type(6){ background: pink; }
.box>div:nth-of-type(1){ transform: translateZ(-50px); } .box>div:nth-of-type(2){ transform: rotateX(90deg) translateZ(50px); } .box>div:nth-of-type(3){ transform: rotateX(90deg) translateZ(-50px); } .box>div:nth-of-type(4){ transform: rotateY(90deg) translateZ(50px);} .box>div:nth-of-type(5){ transform: rotateY(90deg) translateZ(-50px);} .box>div:nth-of-type(6){ transform: translateZ(50px); } HTML: <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> 效果:![]()
從零開始的全棧工程師——CSS3( 2d,3d )