突然發現以前的CSS特效用到了很多轉換過渡什么的，今天集中來講一下！喜歡CSS特效的可以點這里
CSS 2D轉換
轉換是使元素改變形狀、尺寸和位置的一種效果，
您可以使用 2D 轉換來轉換您的元素，通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸，有以下這些屬性：
- translate() 方法
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置引數
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
/* 值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素 */
- rotate() 方法
通過 rotate() 方法，元素順時針旋轉給定的角度，允許負值，元素將逆時針旋轉，
transform: rotate(30deg);
/* 值 rotate(30deg) 把元素順時針旋轉 30 度 */
- scale() 方法
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）引數
transform: scale(2,4);
/* 值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍 */
- skew() 方法
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）引數
transform: skew(30deg,20deg);
/* 值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度 */
- matrix() 方法
matrix() 方法把所有 2D 轉換方法組合在一起，
matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素（具體為水平縮放 ，水平傾斜，垂直傾斜，垂直縮放，水平移動，垂直移動）
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
/* 使用 matrix 方法將 div 元素旋轉 30 度 */
文本陰影
- text-shadow 可向文本應用陰影，能夠規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色，其中水平、垂直陰影可以設定負值，
h1{
text-shadow: 5px 5px 5px #FF0000;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/232053.html
標籤：其他