1.倒影

       （1）倒影+渐变

        例：-webkit-box-reflect:right 10px -webkit-radial-gradient(center center,rgba(0,0,0,0) 20%,rgba(0,0,0,0.8) 80%);  第三个属性值是渐变 

2.transform 变形

        1>该属性允许我们对元素进行旋转 rotate(angle)、扭曲skew(x-angle)、缩放scale(x,y)或移动translate(x,y)

        2>3D变形效果

            -webkit-transform-style:preserve-3d

        3>3D效果视角

            perspective 属性定义3D元素距视角点的距离，以像素计；

            例:perspective:number|none; number--元素距离视图的距离，以像素计

            perspective-origin 属性设置 3D 元素的视角点位置

            perspective-origin: x y

3.变形-旋转

        1>transform:rotate();

            2D旋转：rotate(angle) 在参数中规定角度。

            例：-webkit-transform:rotate(30deg);

            3D旋转：rotateX(angle)沿着 X 轴的 3D旋转。

            rotateY(angle)沿着 Y 轴的 3D旋转。

            rotateZ(angle)沿着 Z 轴的 3D旋转。

            rotate3d(x,y,z,angle)  定义 3D 旋转

            例1：-webkit-transform:rotate3d(1,1,1,360deg);

            例2：-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);

远近互联前端小华整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。