码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 2D 转换

时间:2018-05-28 15:04:21      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:tran   css3   缩放   alt   图片   htm   定义   ota   height   

一、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 转换

标签:tran   css3   缩放   alt   图片   htm   定义   ota   height   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!