CSS布局:如何实现2D转换?代码示例

2021年3月24日14:52:23 发表评论 619 次浏览

转换通过元素的形状, 大小和位置对其进行修改。它沿X轴和Y轴变换元素。

下面列出了六种主要的转换类型:

  • translate()
  • rotation()
  • scale()
  • skewX()
  • skewY()
  • matrix()

translate()方法:

translate()方法用于将元素从其实际位置移动到沿X轴和Y轴的位置。

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >2D Transform</ title >
         < style >
             .geeks {
                 font-size:25px;
                 margin:20px 0;
                 margin-left:100px;
             }
            
             img { 
                 border:1px solid black;
                 transition-duration:2s;
                 -webkit-transition-duration:2s;
             }
            
             img:hover{
                 transform:translate(100px, 100px);
  
                  /* prefix for IE 9 */
                 -ms-transform:translate(100px, 100px); 
  
                 /* prefix for Safari and Chrome */
                 -webkit-transform:translate(100px, 100px); 
           }
            
         </ style >
     </ head >
     < body >
         < div class = "geeks" >Translate() Method</ div >
         < img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png" 
alt = "" />
     </ body >
</ html >

输出如下:

图片移动

rotation()方法:

rotation()方法根据给定的角度顺时针或逆时针旋转元素。程度在括号中给出。

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >2D Transform</ title >
     < style >
     img {
         border:1px solid black;
     }
     img:hover {
         -ms-transform: rotate(20deg); /* IE 9 */
         -webkit-transform: rotate(20deg); /* Safari */
         transform: rotate(20deg); /* Standard syntax */
     }
     .geeks {
         font-size:25px;
         text-align:center;
         margin-top:100px;
     }
     </ style >
     </ head >
     < body >
         < div class = "geeks" >Rotation() Method</ div >
         < img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png" 
alt = "" />
     </ body >
</ html >

输出如下:

旋转

逆时针旋转:

使用负值可逆时针旋转元素。

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >2D Transform</ title >
     < style >
     img {
         border:1px solid black;
     }
     img:hover {
         -ms-transform: rotate(-20deg); /* IE 9 */
         -webkit-transform: rotate(-20deg); /* Safari */
         transform: rotate(-20deg); /* Standard syntax */
     }
     .geeks {
         font-size:25px;
         text-align:center;
         margin-top:100px;
     }
     </ style >
     </ head >
     < body >
         < div class = "geeks" >Counter-clock Rotate() Method</ div >
         < img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png" 
alt = "" />
     </ body >
</ html >

输出如下:

逆时针旋转

scale()方法:

根据给定的宽度和高度参数, 用于增加或减小元素的大小。

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >2D Transform</ title >
     < style >
     img {
         border:1px solid black;
     }
     img:hover {
         -ms-transform: scale(1, 2); /* IE 9 */
         -webkit-transform: scale(1, 1); /* Safari */
         transform: scale(1, 2); /* Standard syntax */
     }
     .geeks {
         font-size:25px;
         text-align:center;
         margin-top:100px;
     }
     </ style >
     </ head >
     < body >
         < div class = "geeks" >Scale() Method</ div >
         < img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png" 
alt = "" />
     </ body >
</ html >

输出如下:

缩放

注意:元素的大小可以使用其宽度和高度的一半来减小。

skewX()方法:

此方法用于沿X轴以给定角度倾斜元素。

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >2D Transform</ title >
     < style >
     img {
         border:1px solid black;
     }
     img:hover {
         -ms-transform: skewX(20deg); /* IE 9 */
         -webkit-transform: skewX(20deg); /* Safari */
         transform: skewX(20deg); /* Standard syntax */
     }
     .geeks {
         font-size:25px;
         text-align:center;
         margin-top:100px;
     }
     </ style >
     </ head >
     < body >
         < div class = "geeks" >skewX() Method</ div >
         < img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png" 
alt = "" />
     </ body >
</ html >

输出如下:

歪斜

skewY()方法:此方法用于沿Y轴以给定角度倾斜元素。

<!DOCTYPE html>
< html >
     < head >
         < title >2D Transform</ title >
     < style >
     img {
         border:1px solid black;
     }
     img:hover {
         -ms-transform: skewY(20deg); /* IE 9 */
         -webkit-transform: skewY(20deg); /* Safari */
         transform: skewY(20deg); /* Standard syntax */
     }
     .geeks {
         font-size:25px;
         text-align:center;
         margin-top:100px;
     }
     </ style >
     </ head >
     < body >
         < div class = "geeks" >skewY() Method</ div >
         < img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png" 
alt = "" />
     </ body >
</ html >

输出如下:

歪斜图像

skew()方法:

此方法使元素沿X轴和Y轴倾斜给定角度。以下示例使元素沿X轴倾斜20度, 并沿Y轴倾斜10度:

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >2D Transform</ title >
     < style >
     img {
         border:1px solid black;
     }
     img:hover {
         -ms-transform: skew(20deg, 10deg); /* IE 9 */
     -webkit-transform: skew(20deg, 10deg); /* Safari */
     transform: skew(20deg, 10deg); /* Standard syntax */
     }
     .geeks {
         font-size:25px;
         text-align:center;
         margin-top:100px;
     }
     </ style >
     </ head >
     < body >
         < div class = "geeks" >skew() Method</ div >
         < img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png" 
alt = "" />
     </ body >
</ html >

输出如下:

歪斜图像

matrix()方法:

此方法将所有2D变换属性组合为一个属性。矩阵变换属性接受以下六个参数:

矩阵(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

例子:

<!DOCTYPE html>
< html >
     < head >
         < title >2D Transform</ title >
     < style >
     img {
         border:1px solid black;
     }
     img:hover {
         -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
         -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
         transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
     }
     .geeks {
         font-size:25px;
         text-align:center;
         margin-top:100px;
     }
     </ style >
     </ head >
     < body >
         < div class = "geeks" >matrix() Method</ div >
         < img src =
"https://media.lsbin.org/wp-content/uploads/lsbin-9.png" 
alt = "" />
     </ body >
</ html >

输出如下:

矩阵法

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: