07、CSS3特效-----2D转换方法、3D效果
生活随笔
收集整理的這篇文章主要介紹了
07、CSS3特效-----2D转换方法、3D效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0px;margin: 0px;}#box{width: 100px;height: 100px;background: red;/*沿著x,y軸各移動(dòng)150px*//*transform:translate(150px,150px);*//*margin: 200px auto;*//*順時(shí)針旋轉(zhuǎn)60度*//*transform: rotate(60deg);*//*縮放*//*transform: scale(2,3);*//*傾斜*//*transform: skew(30deg,20deg);*//*矩陣*/transform: matrix(1,0,0,1,30,30);}</style>
</head>
<body><div id ="box"></div>
</body>
</html>
2D轉(zhuǎn)換：translate()、rotate（）、scale（）、skew(）
3D轉(zhuǎn)換：translate3d()、rotate3d()、scale3d()
3D轉(zhuǎn)換屬性：transform-origin、transform-style
轉(zhuǎn)換元素的透視視圖：perspeective
總結(jié)
以上是生活随笔為你收集整理的07、CSS3特效-----2D转换方法、3D效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android仿苹果悬浮窗（自动停靠、随
- 下一篇： 小和尚学习-CSS选择器