在css3中，可以利用transform功能来实现文字或者图像的旋转、缩放、倾斜、移动这四种类型的变形处理。
- 旋转
旋转功能使用rotate方法参数中加入角度值，方向为顺时针旋转。示例清单如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>rotate使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
效果图：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPsAAACWCAIAAACXeml1AAACs0lEQVR4nO3b24riQBRA0fr/n+55GrA15mKccsxei0MjuRRBdmJeevxAyfj0BcBUiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF03K8+DGMef/MovhXZry6d/3E88d/8cyi+G2Lp6wv+PLe88d/68yi+Fdm/P27eGOcvB92+viX8OaZRfGHZyXu8XvjIYsL7rmGi8wsij88+4t/dtj66Ycu4Dozi+KPzXgo/vYhfbL4xWUffweuObOkiz/k9pTbFW4/PCt+ceOhgi+e+1D852alrbugH9P/R8VfP/eh+M/NZl6Lz/vN4u+2y/1+ZlH8+Hne4vrT+rHy9eI3Dzjk41/am2cWxY+f1cqfvY0snrJZ/Obe88d/68yi+L2J7zng5DN+z+VddmapF7/Z9+PGo3fInkUOXeE1Z5Z08ZtxL27cDHfnxp0pK/690sXfzc5XjvHwYX2FsfrUf+8r0BfPLIr/NXvyWg/x7hdg54J7Vrv4zKJ483/MLP7rjxbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtfwAanLjKpU+JmQAAAABJRU5ErkJggg==" alt="" />aaarticlea/png;base64,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" alt="" />
- 缩放
使用scale方法来实现文字或图像的缩放处理，参数为水平缩小度数和垂直放大倍数。示例清单如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scale使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-webkit-transform:scale(0.5,2);
-moz-transform:scale(0.5,2);
-o-transform:scale(0.5,2);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
效果图：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPsAAACWCAIAAACXeml1AAACs0lEQVR4nO3b24riQBRA0fr/n+55GrA15mKccsxei0MjuRRBdmJeevxAyfj0BcBUiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF03K8+DGMef/MovhXZry6d/3E88d/8cyi+G2Lp6wv+PLe88d/68yi+Fdm/P27eGOcvB92+viX8OaZRfGHZyXu8XvjIYsL7rmGi8wsij88+4t/dtj66Ycu4Dozi+KPzXgo/vYhfbL4xWUffweuObOkiz/k9pTbFW4/PCt+ceOhgi+e+1D852alrbugH9P/R8VfP/eh+M/NZl6Lz/vN4u+2y/1+ZlH8+Hne4vrT+rHy9eI3Dzjk41/am2cWxY+f1cqfvY0snrJZ/Obe88d/68yi+L2J7zng5DN+z+VddmapF7/Z9+PGo3fInkUOXeE1Z5Z08ZtxL27cDHfnxp0pK/690sXfzc5XjvHwYX2FsfrUf+8r0BfPLIr/NXvyWg/x7hdg54J7Vrv4zKJ483/MLP7rjxbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtfwAanLjKpU+JmQAAAABJRU5ErkJggg==" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOUAAACGCAIAAACty9q1AAAD00lEQVR4nO3b623jMBAAYdblglSPqlEzKkb3wxBBPc8B7OUONB+EwHdxgiw0oBVaKYvEUXr/ANIf2KtI7FUk9ioSexWJvYrEXkViryKxV5HYq0jsVST2KhJ7FYm9isReRWKvIrFXkdirSOxVJPYqEnsVib2KxF5FYq8isVeR2KtI7FUk9ioSexWJvYrEXkViryKxV5HYq0jsVST2KhJ7FYm9isReRWKvIrFXkdirSDL1WorHp8dTZZq8ewSg46kyTd49AtDxVJkm7x5BKfPfPzXffpW9flemyTs1OjWPh+2nxutn3jzNXn8n0+Sden1dl3f/T3uNl2nyqJM9l4321byWN9lrSpkmjz/rh47HNeLhg17nw4OrCwZ7/ZZMkyfodSplavq7CnRc69wZvvST2OuVTJP37nVak63tnr7QT2uXu9V0dn39vUyTJ+h1WRtte71aRD/cPbDXL8o0ee9e66v8su6q1iJPrxB2r/6hu7BPlWnyfqXWlfW9ps7Nx9rifOh13H4H19cAmSbv1+t7C3YoZS5lWF/0522Rx17fX1iF7mo9VabJQ870fLgefVuaRusuwW4FPfZaj7idAXvNIviUH+Ibmi2tY6+n6+vVt7LXH8k0ee9ex+0W7Ofra4dbXp4q0+SB5/u4WM7Nmjqe9Xqzvvp+bJhMkwee73YToO11ul1fr94RiL54tdcUAs93vT2g7W9a97NO19fdW7W7+qPDfapMkwf2Oq4f2yXzfn0dt72e7jO8vvcT2uupTJP36HVpopyai9Tj/QPT9fLp9WuYTJN36rVWeN/rfL182muYTJNHnex5uzlVf+uqlwHTWa+L62sCmSaPOtn1grXe4DJtez29W8D1NYNMk0ed7HH7YG7C3e1Y7X7fGv63P2Cvv5Zp8qiTvVtfl497vbqD217DZJo8R6+ndwzW/y9nS6y9hsk0eWCs09liebO+tg+KvfaTafLYU/4667VdUMtZr8v2fYHd0+z11zJNHnvKd2/GLocVd9xue1194WivgTJNHnvKjzcDHP/e9eavZNunhf4ljL1mEX/WucdTZZq8ewSg46kyTd49AtDxVJkm7x4B6Hiq504uInsVib2KxF5FYq8isVeR2KtI7FUk9ioSexWJvYrEXkViryKxV5HYq0jsVST2KhJ7FYm9isReRWKvIrFXkdirSOxVJPYqEnsVib2KxF5FYq8isVeR2KtI7FUk9ioSexWJvYrEXkViryKxV5HYq0jsVST2KhJ7FYm9isReRWKvIrFXkdirSOxVJPYqEnsVib2KxF5FYq8isVeR2KtI/gEMbrUcJSRGnAAAAABJRU5ErkJggg==" alt="" />
- 倾斜
使用skew实现倾斜效果，参数为水平和垂直倾斜30度。示例清单如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scale使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-webkit-transform:skew(30deg,30deg);
-moz-transform:skew(30deg,30deg);
-o-transform:skew(30deg,30deg);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
效果图：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPsAAACWCAIAAACXeml1AAACs0lEQVR4nO3b24riQBRA0fr/n+55GrA15mKccsxei0MjuRRBdmJeevxAyfj0BcBUiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF03K8+DGMef/MovhXZry6d/3E88d/8cyi+G2Lp6wv+PLe88d/68yi+Fdm/P27eGOcvB92+viX8OaZRfGHZyXu8XvjIYsL7rmGi8wsij88+4t/dtj66Ycu4Dozi+KPzXgo/vYhfbL4xWUffweuObOkiz/k9pTbFW4/PCt+ceOhgi+e+1D852alrbugH9P/R8VfP/eh+M/NZl6Lz/vN4u+2y/1+ZlH8+Hne4vrT+rHy9eI3Dzjk41/am2cWxY+f1cqfvY0snrJZ/Obe88d/68yi+L2J7zng5DN+z+VddmapF7/Z9+PGo3fInkUOXeE1Z5Z08ZtxL27cDHfnxp0pK/690sXfzc5XjvHwYX2FsfrUf+8r0BfPLIr/NXvyWg/x7hdg54J7Vrv4zKJ483/MLP7rjxbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtfwAanLjKpU+JmQAAAABJRU5ErkJggg==" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADrCAIAAADi02THAAAMMklEQVR4nO3dTWwUZRzH8adAERAQFEQQXxDlxRdeRbTiG5Ag2Jvh2OvGEzFeevDQiwdCotmbafRSj3ggqbiaIAKiiAK+y9siooggCCgIWl768/B0ltmXtrvTmXlmdr+fTIwFQudJ+GZ3Zp791wiAZFyfAJAIlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIlABYlABIQyqhp0ebNqm3N7yTAZwZ2mvC669rwQLt2BHSyQDODK2EK1c0e7aMUWurjh4N6ZQAB4Z8nbB5s4yRMRo9Wu3tunAhjLMC4hbGFfPq1X0xGKNp09TVxcUDUieMEg4cUHPzjRiM0ZIl2rUrhL8ZiEtId1FffrmoBGPU1KS2Np08Gc7fD0QspBLOn9fkyaUxGKObb1ZHh/79N5zvAkQmvCdrb75ZoQR7zJypjRtD+0ZABMIr4do1zZ/fbwzGaPlyffttaN8OCFWouy127lRT00AxjBihTEanT4f5TYEwhL3v6MUXByrBHhMnKpvV1ashf2tgCMIu4ehRjRo1eAzGaPZsvf9+yN8dCCqCvaivvlpVCfZobdWRI+GfA1CjCEq4dEl3311DDM3NWrdOf/8d/pkAVYvm8wnvvFNDCfaYOlWdnbp2LZLzAQYTTQm9vVq6tOYYjNGiRdq5M5JTAgYU2WfW9u7VsGFBYrAXD8eORXViQCVRfnrzrbc0aVLAGMaP14YN6umJ8PQAn4g/x/zPP+roqPa+avkxfTp7vBGPWD7R/+uvamsLGIMxWrpUu3fHcZ5oYDHOtvj4Y82bFzCGYcPU1qZTp+I7WzSYeKe8XL+urq7K+7erOcaOVUeH/vsv1nNGY3Ax7+jcObW3a+TIgD088AB7vBE6d5O/Dh7UmjXBLx5WrtT33zs7edQd1zPwtmzR3LkBY2huViajM2ccLwF1wXUJkq5cUTar8eMD9nDrrcpm2aaBIUpACdaZM1q3TsOHB+xh7lx9+KHrNSDFElOCtW+fnnoq+MVDa6t++sn1GpBKCSvB6u7WvfcGjGHkSK1bxyg+1CqRJUi6dEnr12vs2IA9TJumzk5dv+56GUiNpJZgHT+utrZBpgQMcDz6qD77zPUakA7JLsHavTvgpx2MUVOT1q7VL7+4XgOSLg0lyNumMWVKwB4YxYfBpKQE6+JFdXToppsC9nDXXerqcr0GJFSqSrAOH9batcHvtD73HKP4UC6FJVgffaSHHw4Yg93j/ccfrteABEltCZKuXlVnZ/APiE6cqPXr+YAorDSXYJ09O6RtGozig6R6KMHav1+rVgW/eFi5Uj/+6HoNcKleSrC6u3XffQFjsKP4/vrL9RrgRn2VIKmnR9msxo0L2MNtt7HHuzHVXQnWiRPKZIKPHlu0SJ984noNiFWdlmDt2aOWluAXD62t+vln12tATOq6BEm9vdq4sbbZ3cZkjcnZ/x8zRu3tunjR9TIQuXovwap9FF/GGGNM3n55552M4qt7jVGCVfsovhZjWgpfPvaYPv/c9RoQlUYqwapiFF/eF0DeGGNM1n7JKL761XglyNvjffvtA8dgjMn4rhxM4eLB7vFmFF99acgSrCpG8eX8AXgXD31fMoqvvjRwCVYVo/hsAP4vC21oxQpG8dWHhi/B2rJFDz44wCuDfXfUUvEP2B+3zii+lKMEjx3Fd8st/b1HKlwtZCv2wCi+lKOEYn/+Wb7HO1t86Zwtvngo1CJjNHeuPvjA9RoQBCVUUjyKL1f8Lz5nTL7k6tkY+Z/EMYovhSihf/2M4sv4XiUyxXeW8oU/Zkfx8ePW04MSBnT5sn8UX977r92YlCl7g1Ryl4lRfClCCVX47bfCKD77uC3j/dP3303KexmU3mViFF8aUELVvvhCjz9euJWUKduXUbieVvldV0bxJR4l1KK3V11duuMO+d4alceQ995BFX6r78brmDGM4kssSqid3ePtG8WXL75myHrvkbK+W083amEUXyJRQlD5vH8UX8534yjnXUJkvfdR9gZr0SOIZ5/VN9+4XgNuoISh6WcUn/+tUcbLoOReE6P4EoUShqzSKL588XukQgYVdmpMmMAoviSghJDYUXwjRpRcLcjbwOe/s6Tii+ycMZo1S5s3u15DQ6OEUB04oOef9z+NVtkdpMIvGt+v9F1CMIrPHUqIgDeKL1d2hZApvrYubOa7EQOj+ByhhGj0jeIb1VJ8oZyrdOmc8W403fhFRvHFjhKi9Pvv5aP4cuV3VL0r7NKbSwsXMoovNpQQvT179OSTKnsdKLnrmvP2cZTeX2IUXywoIRbFo/jyle6oZny/brwnEn2/O3o0o/iiRgkxunRJHR0aNbLw7DnfzwuF/QhES8kfYBRflCghdt4ovvILg8L91sLThgozBBjFFw1KcGTbNs2fX75NI+99/qHkI6OFR9Q5Y9TUpLY2nTzpeg11hRLc6WcUX8XrZuN78tD3W4ziCxUluHb+vNrbNWK4KVZxlkzGO2787v33M4ovFJSQDIcO6YUXSu6rlsdQuNla8jhCK1bou+9cryHdKCFJtmzRQw/5/92XPmvzXhNKBhjLeKP4Tp92vYa0ooSEKR7F5x8a4H8paPE9iSt6fbCj+K5edb2M9KGERPKN4sv7Zor5f9JP4eq5fAaZ5sxhFF+tKCHBvvpKTz9deBHwf7ahxbdbyXh7+Eqe0zGKryaUkHjeKD7/PNa8d4upxXt9KM3AHoziqxolpEHxKL6Shw+l95HKj6lTGcU3KEpID98ovpK7SWbQGIzR4sX69FPXa0guSkibL7/UE0+UbNAY6Aed+A87iu/YMddrSCJKSKHiUXyFiQGFi4dBemAUXyWUkFp2FN/IEZmyp2xVvVmaPp093n6UkHLeKL4Kd1GrORjF56GEurB1qx55pOYM7MEoPkmUUD/sKL7JkwP20PCj+Cihvpw7VzKKr7Zj1iy9957rNbhBCfXowAGtXh0wBmO0cqV++MH1GuJGCfWru1szZwaMofFG8VFCXbN7vMePD9hDI43io4QGUGkUXw3HwoXascP1GiJHCQ1j797yUXw1HK2tOnrU9RoiRAmNxI7iu+eegDHYUXwXLrheRiQoofHYUXyjRwfsoU5H8VFCozp+vOIe72qPJUu0a5frNYSJEhrb9u0VR/FVddTXKD5KaHj9jOKr9rCj+NK/x5sSIMkbxef7ceu1HekfxUcJ8Dl0SK2twe+0Ll+e3lF8lIAyxaP4ajtSO4qPElBJ8Si+mo+JE1M3io8S0D/fKL4gx5w5yuVcr6FalIDB+EbxBTlaW3XkiOs1DI4SUJ3ubs2YETAGu8c72aP4KAFVs6P4xo0L2IMdxZfUPd6UgBqdODGkbRqLF2vnTtdrqIASEEjZKL4ajkSO4qMEBOUbxRfksKP4Ll92vYw+lIChsaP4Ro0K2ENiRvFRAsLgjeILeDzzjL7+2u0KKAHh2bpV8+YFjMGO4jt1ytW5UwJC1dOjDRuCT9OYNElvv+3kxCkBERjiKL5t2+I/ZUpAZA4eDDiKb/78+B/AUQIiFmwUX2dnzKdJCYhegFF8kyfr/Pk4z5ESEBc7iq/6Pd6vvBLn2VEC4rVvn5Ytq6qE5mYdPBjbeVECYlf9KL41a2I7KUqAI1WO4ovrU2+UAKcGHcU3Z46uXInhRCgBCbB9uxYs6DeGN96I4RQoAclgR/FNmVKhhAkTYhgbQwlIkosX1dFRYRTfSy9F/Z0pAclz+HDpKL7hw6P+CeqUgKQqGcW3bFmkH+ihBCSY3aYxYUJfDO++G923ogQk3tmzfaP4ZsyIbjw9JSAl9u/XqlV67bWI/npKQHr09mrTpogetFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYFECIFECYP0P6ZNZnINg7XwAAAAASUVORK5CYII=" alt="" />
- 移动
使用translate，参数为水平向上和垂直向上移动50px。示例清单如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scale使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-webkit-transform:translate(50px,50px);
-moz-transform:translate(50px,50px);
-o-transform:translate(50px,50px);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
效果图：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPsAAACWCAIAAACXeml1AAACs0lEQVR4nO3b24riQBRA0fr/n+55GrA15mKccsxei0MjuRRBdmJeevxAyfj0BcBUiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF03K8+DGMef/MovhXZry6d/3E88d/8cyi+G2Lp6wv+PLe88d/68yi+Fdm/P27eGOcvB92+viX8OaZRfGHZyXu8XvjIYsL7rmGi8wsij88+4t/dtj66Ycu4Dozi+KPzXgo/vYhfbL4xWUffweuObOkiz/k9pTbFW4/PCt+ceOhgi+e+1D852alrbugH9P/R8VfP/eh+M/NZl6Lz/vN4u+2y/1+ZlH8+Hne4vrT+rHy9eI3Dzjk41/am2cWxY+f1cqfvY0snrJZ/Obe88d/68yi+L2J7zng5DN+z+VddmapF7/Z9+PGo3fInkUOXeE1Z5Z08ZtxL27cDHfnxp0pK/690sXfzc5XjvHwYX2FsfrUf+8r0BfPLIr/NXvyWg/x7hdg54J7Vrv4zKJ483/MLP7rjxbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtiqdF8bQonhbF06J4WhRPi+JpUTwtfwAanLjKpU+JmQAAAABJRU5ErkJggg==" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQoAAACQCAIAAAB/I7IPAAAClklEQVR4nO3b0W6jMBRAQf7/p7dPK6UJx5iGXTdoRldVRMBCkU/JS7Y/QNhW3wD8XvKAJA9I8oAkD0jygCQPSPKAJA9I8oAkD0jygCQPSPKAJA9I8oAkD0jygCQPSPKAJA9I8oAkD0jX5bFtxlw/S8njytl++u74wvfP/+BZSh45h3YvGS/443ffP/9TZyl5XDnb37+7Fb0Zz6TlH8LFs5Q8LptBCdv3g6fsLjhzDzeZpeRx2cznUaeNLz91A/eZpeRxzWwveTz++38zj91lX58w95yl5LEzpzxe8rjC44vKY/fgqe1+8zY2eXzIDDbi0+5/7eQf5XH/NjZ5fMgc7sXdJ8lhHk/HtfE8S8ljNLVxx8+B1yTGeRyecMryD+3iWUoeoxkkUV+Kdi85zOPw3ffP/9RZSh45kz3MnPDm02Pm9m47S8ljfw5jeD14NqeZRU7d4T1nKXnszGEJuwcPd/nkwcl9L4//QB7HM/nNZ3t5MV5hGz5Prv0m9sGzlDymZmYvjnft07NlcsGZ1W4+S8nD/O5Zyo9pIckDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA5I8IMkDkjwgyQOSPCDJA9IXGVNbmBQ7X/UAAAAASUVORK5CYII=" alt="" />
- 对一个元素使用多种变形。示例清单如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>scale使用实例</title>
<style>
div{
width:200px;
margin:200px auto;
background-color:red;
text-align:center;
-webkit-transform:translate(150px,200px) rotate(45deg) scale(1.5);
-moz-transform:translate(150px,200px) rotate(45deg) scale(1.5);
-o-transform:translate(150px,200px) rotate(45deg) scale(1.5);
}
</style>
</head>
<body>
<div>示例文字</div>
</body>
</html>
效果图：
aaarticlea/png;base64,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" alt="" />aaarticlea/png;base64,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" alt="" />