css3 效果全（旋转，放大，倾斜，平移）
生活随笔
收集整理的這篇文章主要介紹了
css3 效果全（旋转，放大，倾斜，平移）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
css代碼如下
body{padding: 100px;}/*初始設(shè)置所有盒子大小及顏色*/div{width: 100px;height: 100px;background: #0f0;margin-top: 30px;/*設(shè)置過渡時(shí)間及效果*/transition: all 5s; }.a:active{/*旋轉(zhuǎn) 角度為360度*/transform: rotate(360deg);}.b:active{/*放大為原來的2倍 縮小為0-1倍*/transform: scale(2);}.c:active{/*傾斜為原來的45度 可為正負(fù)*/transform: skew(45deg);}.d:active{/*平移 可設(shè)兩個(gè)值 中間用 "," 分開 第一個(gè)值為x 第二個(gè)值為Y軸*/transform: translate(300px);}html代碼如下：
<body><div class="a">旋轉(zhuǎn)</div><div class="b">放大</div><div class="c">傾斜</div><div class="d">平移</div></body>?
總結(jié)
以上是生活随笔為你收集整理的css3 效果全（旋转，放大，倾斜，平移）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 美国3D动画电影的创意设计与执行
- 下一篇： 赵本山给美国人测智商