保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
生活随笔
收集整理的這篇文章主要介紹了
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- transfrom
- 2D轉換
- 案例代碼
- 效果圖
- 元素變形原點
- 3D轉換
- 3D轉換——案例
- 案例代碼
transfrom
transform，翻譯成中文的含義是“改變，使…變形；轉換”，用于向元素應用2D或3D 轉換。
transform屬性的基本語法如下所示：
屬性一：默認值為none，適用于內聯元素和塊元素，表示不進行變形。
屬性二：用于設置變形函數，可以是一個或多個變形函數列表。
2D轉換
transform-functions的常用于2D轉換的函數說明如下表所示。
案例代碼
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>CSS3 2D轉換</title><style>.demo{margin: 25px;padding: 0;width: 150px;height: 50px;background-color: #2bab79;font-weight: bold;font-size: larger;float: left;}.trans1{transform:rotate(30deg);}.trans2{transform:skew(30deg);}.trans3{transform:scale(0.8);}.trans4{transform:translate(5px,50px);}/*教材元素旋轉對比截圖部分的代碼*//*.demo{*//*margin: 50px;*//*padding:0px;*//*width: 150px;*//*height: 50px;*//*background-color: rgba(255, 177, 81, 0.02);*//*font-weight: bold;*//*font-size: larger;*//*border: 1px dashed;*//*}*//*.trans{*//*margin: 0px;*//*padding: 0;*//*width: 150px;*//*height: 50px;*//*background-color: #2bab79;*//*transform:rotate(30deg) ;*//*transform-origin: left 0 0 ;*//*}*/</style> </head> <body> <div class="demo">不設置變形</div> <div class="demo trans1">rotate(30deg)</div> <div class="demo trans2">skew(30deg)</div> <div class="demo trans3">scale(0.8)</div> <div class="demo trans4">translate(5,50px)</div> <!--教材元素旋轉對比截圖部分的代碼--> <!--<div class="demo"><div class="trans">rotate(30deg)</div></span></div>--> </body> </html>效果圖
元素變形原點
元素的變形都有一個原點，元素圍繞著這個點進行變形或者旋轉，默認的起始位置是元素的中心位置。
CSS 變形使用transform-origin屬性指定元素變形基于的原點，語法格式具體如下：
transform-origin: x-axis y-axis z-axis;
transform-origin最多接受三個值，分別是x軸、y軸和z軸的偏移量。
transform-origin的參數說明如下表所示。
注意：transform-origin的三個參數均為可選參數，參數值為0px時可以省略不寫。
3D轉換
3D 變形是指某個元素圍繞其x軸、y軸、z軸進行旋轉，transform-functions的常用于3D轉換的函數說明如下表所示。
3D轉換——案例
perspective屬性的透視效果就是用于實現視覺上的3D效果的，接下來看一個典型的案例——立方體，頁面效果如下所示。
案例代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS 3D轉換</title><style>body {margin: 0;padding: 0;background-color: #F7F7F7;}.box {width: 200px;height: 200px;text-align: center;line-height: 200px;font-size: 24px;margin: 100px auto;position: relative;perspective: 1000px;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(30deg);}.front, .back, .left, .right, .top , .bottom {position: absolute;width: 100%;height: 100%;left: 0;top: 0;opacity: 0.5;}.front {background-color: pink;transform: translateZ(100px);}.left {background-color: green;transform: rotateY(90deg) translateZ(-100px);}.right {background-color: red;transform: rotateY(-90deg) translateZ(-100px);}.top {background-color: blue;transform: rotateX(90deg) translateZ(100px);}.bottom {background-color: yellow;transform: rotateX(-90deg) translateZ(100px);}.back {background-color: purple;transform: translateZ(-100px);}</style> </head> <body> <div class="box"><div class="front">front</div><div class="back">back</div><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div> </div> </body> </html>總結
以上是生活随笔為你收集整理的保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS过渡属性transitions详细
- 下一篇： 用HTML和CSS实现一个漂亮的个人博客