首页 > Web开发 > 详细

CSS3 2D 转换

时间:2018-05-28 14:19:35      阅读:306      评论:0      收藏:0      [点我收藏+]

一、CSS3 2D有两个属性:

       (1) 、transform:用于2D或3D转换的元素。

       (2) 、transform-origin:允许更改转化元素位置

二、CSS3 2D的transform属性有5大方法:

       1、rotate(angle)旋转方法:定义 2D 旋转,方法中的参数规定了是角度(deg)。

            html:

            技术分享图片

           css:

           技术分享图片

          效果:

           技术分享图片

 

 

      2、scale()缩放方法:定义 2D 缩放元素。

            (1)、scale(x,y):定义 2D 缩放,改变元素的宽度和高度。

                    Html:

                    技术分享图片

                    CSS:

                    技术分享图片

                  效果:比原先大两倍

                   技术分享图片

           (2)、scaleY(n):2D 缩放,改变元素的高度。

                  Html:

                   技术分享图片

                 CSS:

                  技术分享图片

                  技术分享图片

                  效果:

                   技术分享图片

       (3)、scaleX(n) 2D缩放,改变元素的宽度。

             Html:

               技术分享图片

             CSS:  

     技术分享图片                 

     技术分享图片

     效果:

    技术分享图片

CSS3 2D 转换

原文:https://www.cnblogs.com/yachjin/p/9099711.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!