2D、3D形变

最新推荐文章于 2023-01-05 10:53:30 发布

weixin_30895603

最新推荐文章于 2023-01-05 10:53:30 发布

阅读量151

点赞数

原文链接：http://www.cnblogs.com/candylily/p/6253369.html

版权

一、2D形变：

　形变的属性名:transform

类型:

1.平移(translate)

2.缩放(scale)

3.倾斜(skew)

4.旋转(rotate)

demo中需要的图：

houRes/bg-grid.jpg：

houRes/cardKingClub.png

1 <body>
2     <div class="box">
3         <img src="houRes/cardKingClub.png"/>
4         <img src="houRes/cardKingClub.png" />
5     </div>
6 </body>

 1 //基本的css：
 2             .box{
 3                 width: 400px;
 4                 height: 400px;
 5                 background: url(houRes/bg-grid.jpg) no-repeat red; 
 6                 /*background-size:支持百分比,百分比是基于box的大小而言,第一个是水平方向
 7                  第二个是垂直方向*/
 8                 background-size: 100% 100%;
 9                 position: relative;
10             }
11             img{
12                 width: 100px;
13                 height: 150px;
14                 /*宽度明确,借助绝对定位,left: 0;right: 0;margin:0 auto;实现左右居中*/
15                 position: absolute;
16                 left: 0;
17                 right: 0;
18                 top: 0;
19                 bottom: 0;
20                 margin: auto;
21             }
22             .box img:first-child{
23                 opacity: 0.5;
24             }

 1     .box img:last-child{
 2                 /*1.平移:translate
 3                      translateX:水平方向
 4                      translateY:垂直方向
 5                      值为px或是百分比,百分比就是基于设置样式的标签本身的大小,
 6                        x:width,y:height
 7                      合起来写:translate(X,Y)[用逗号隔开] 
 8                 */
 9                 transform: translateX(20px) translateY(20px);
10                 /*transform: translate(20px ,20px);*/
11                 /*transform: translate(20px);*/
12         }

效果图：

        .box img:last-child{
               /*2.缩放:
                     scaleX
                     scaleY
                     值为倍数,1=1倍
                     值为负数时,先翻转后缩放
                     合写:transform:scaleX(X,Y);
             */
            transform:  scaleX(0.6)  scaleY(-0.6);
            /*transform:scale(-0.5,0.5);*/            
        {

效果图：

 1         .box img:last-child{
 2             /*倾斜skew
 3                  单位是deg
 4                  当倾斜为90deg会消失不见
 5                  skew(x,y);
 6              */
 7             transform:skewX(45deg) skewY(0deg);
 8          }

效果图：

 1    .box img:last-child{
 2              /*旋转rotate
 3                  单位:deg
 4                  默认点:中心的
 5                   正角度:顺时针旋转
 6                   负角度:逆时针旋转         
 7               */
 8              /*transform:rotate(45deg)*/
 9              /*更改旋转的源点
10                       origin
11                  默认值:center center
12                   left top:左上角点
13                   left bottom
14                   right top 
15                   left=left center
16                       */
17                 transform-origin:left top;
18                 transform:rotate(45deg)
19            }

效果图：

所有的属性都支持形变的:

transform:多组形变用空格

background:多组之间用","号

形变中平移其实真正的位置没有改变,移动就是个假象

二、3D形变　

想要展示子元素的3d效果，必须要给子元素的父级添加：

transform-style:preserve-3d;属性和属性值,默认值为flat:平面展示(2d)　　

　　平移：translate3d(x,y,z)　　　　　　　　

　　缩放：scale3d(X,Y,Z)

　　旋转：transform :rotate3d(x,y,z,旋转度数);

* 当x,y,z的值为1时,就代表在该轴上进行旋转,度数为第四个参数

转载于:https://www.cnblogs.com/candylily/p/6253369.html

weixin_30895603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2D、3D形变

一、2D形变：　形变的属性名:transform 类型: 1.平移(translate) 2.缩放(scale) 3.倾斜(skew) 4.旋转(rotate)demo中需要的图：houRes/bg-grid.jpg：houRes/cardKingClub.png1 &...
复制链接

扫一扫

2D、3D形变

“相关推荐”对你有帮助么？