css3盒模型、过渡、转换介绍
CSS3中盒模型：
前面CSS中學到的盒子模型給padding、border會撐開盒子的大小，實際大小要通過計算才能得到，為了解決這個問題，CSS3推出了box-sizing屬性來解決此問題，當box-sizing的屬性值為border-box時，無論給多大padding、border都不會撐開盒子的大小，而是內減content的大小，當值為content-box時，此時是前面CSS2中的盒子模型。
<style>div {width: 200px;height: 200px;background-color: lightblue;padding: 50px;border: 20px solid lightgreen;box-sizing:border-box;}</style><body><div>今年</div></body>transition過渡：
過渡是指從一個狀態逐漸過渡到另一個狀態，注意：過渡屬性是加在需要過渡的元素上面的，關于過渡的相關屬性總結如下：
transform轉換：
CSS3中給我們提供了2d和3d兩種轉換。
transform2D轉換：
指元素在二維空間進行旋轉、縮放、移動、傾斜，轉換前后不會影響其他元素的位置，對行內元素無用,其屬性值：
其綜合寫法：transform：translate(x,y) rotate(45deg) scale(2);先旋轉會改變坐標軸方向，一般位移在最后。
transform3D轉換:
3d有近大遠小、物體后面遮擋不可見的特點，屬性依舊是transform，和透視搭配才有效果，其屬性值：
perspective透視：
透視(視距)，在2D平面產生近大遠小立體效果，透視寫在被觀察元素的父級盒子上，透視越大，成像越小，單位常用px。
transfrom-style 3D呈現：
控制子元素是否開啟3d立體空間，默認值flat不開啟，preserve-3d子元素開啟3d立體空間，3d呈現寫在被觀察元素的父級盒子上
<style>.box {margin: 0 auto;width: 100px;position: relative;perspective: 500px;/*透視（視距）*/transform-style: preserve-3d;/*3D呈現為子元素開啟3d立體空間*/}.box1,.box2 {width: 100px;height: 100px;background: yellow;position: absolute;}.box2 {background-color: rgb(69, 25, 214);transform: rotate3d(1, 0, 0, 90deg);/*1表示需要旋轉，0表示不需要旋轉*/}.box1 {transform: rotate3d(0, 1, 0, 80deg) translate3d(-60px, 20px, 20px);}</style><body><div class="box"><div class="box1"></div><div class="box2"></div></div></body>backface-visibility定義不面向屏幕時隱藏：
由transform翻轉后的圖形默認是可以看到的，只是方向會改變，當給翻轉的元素添加backface-visibility：hidden后，翻轉后的元素就會被隱藏不顯示:
<style>.box {position: relative;}.box img {position: absolute;top: 0;left: 0;transition: all 2s;}.box:hover img {transform: rotate3d(1, 1, 0, 180deg);}img:last-child {backface-visibility: hidden;/*此屬性要添加在翻轉的元素上面*/}</style><body><div class="box"><img src="images/1.jgp" width="200"><img src="images/2.jgp" width="220"></div> .</body>提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海
總結
以上是生活随笔為你收集整理的css3盒模型、过渡、转换介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python使用函数目的_Python函
- 下一篇： 在用c语言写代码是这么找出错误,写代码（