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