css3 2d转换

Posted 前端小白学习

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 2d转换相关的知识，希望对你有一定的参考价值。

transform 转换

    转换？转换就是我们对元素进行移动、缩放、转动、拉长或拉伸

    transform中的属性将图形进行变换后，是不会影响到其他元素的布局的


transform属性

    translate()

        平移

    rotate()

        旋转

    scale()

        缩放

    skew()

        变形

translate

    使用方法如下：

    transform: translate(100px, 100px);


    translate(100px) 

    如果只写一个值，那么元素会沿着x轴方向进行平移

    值为正值，沿着正方向，值为负值，沿负方向

      

    translate(100px, 100px)

    如果写两个值，那么元素会沿着x轴和y轴分别进行平移，到达对应位置


    translateX(100px)

    translateY(100px)

    

    translate可以用来代替一些平移操作比如margin-left产生，定位的相关位置属性产生的


    translate(50%)

    如果translate中使用百分比，那么指的是元素本身的百分比


    translate性能要比margin-left  left等属性要好，所以如果不考虑兼容，那么可以使用这个属性


代码展示


div { width: 100px; height: 100px; background: #000; transform: translate(50px, 50px);}

页面效果

我们没有设置transform的时候，黑色的块应该在红色框的位置，我们使用它在xy轴都移动了50px。


小知识：我们知道这个值是可以使用百分比值的，我们使用定位将一个块定位到盒子中间是，需要设置left，top值为50%；但是会有这个块本身的宽高影响，需要我们设置margin值才可以移动到正中间，但是不知道这个块的宽高时可以使用transform的translate设置了

看例子


.box{ width: 200px; height: 200px; border: 1px solid #000; position: relative;}.inner{ position: absolute; top: 50%;  left: 50%; transform: translate(-50%,-50%);  /* 又宽高时也可以这样设置，但是是由兼容问题的，不考虑兼容时可以使用*/}<div class="box"> <span class="inner">不定宽高</span></div>


效果展示

css3 2d转换

坐标我们要清楚

css3 2d转换

rotate

    

    旋转需要写的单位为角度 deg


    旋转默认正值为顺时针旋转，负值为逆时针旋转


    旋转的同时，坐标轴也会跟着旋转


例子

 div { width: 100px; height: 100px;  background: #000;  transform: rotate(30deg);  /* div块顺时针旋转30度*/}<div></div>

效果展示

css3 2d转换

注意：2d转换只是平面上进行操作的


scale

    可以对元素的大小进行缩放


    scale(倍数)

    如果只写一个值，那么水平垂直方向上都会进行缩放

    怎么能够只缩放一边

    scale(x, y)

    

    分开写

    scaleX()

    scaleY()


例子


div { width: 100px; height: 100px; background: #000; margin: 100px auto; color: #fff; transform: scale(1, .5);  /* x轴大小不变，y轴缩小0.5倍*/}<div>文字</div>

页面效果

css3 2d转换

skew

    沿着x，y轴倾斜

    

    skew(x度数, y度数)

    skewX()

    skewY()


例子

    


div { width: 100px; height: 100px;  background: #000; transform: skew(0, 45deg);   /* x轴不倾斜，沿着y轴倾斜45度*/  }

页面显示

css3 2d转换

原点位置transform-origin


    什么是原点位置？这里当我们去对元素在进行转换时，都是基于一个原点位置进行转换的，原点位置在哪,元素的中心，图中A的位置，有时候我们想让这个元素基于右下角为原点进行转换（这里转换可以是上面讲述内容）可以使用transform-origin

    transform-origin 这里指的位置是从左上角开始计算的

    可以写固定值  px

    可以写关键字

        x轴 left center right

        y轴 top center bottom


    可以写百分比

        0% - 100%


        0%  left/top   0

        50% center 

        100% right/bottom

例子

div { width: 100px; height: 100px;  margin: 100px auto;  background: #000;  transition: transform 2s;  /* 这里可以使用过渡效果，使我们的转换有过渡的效果*/  transform-origin: 100px 100px;}div:hover { transform: scale(1.5);}

页面效果

看下，当我们不使用改变原点时，是以元素的中心点缩放的，我们改变后，是以右下角开始的，注意：设置原点位置时，是根据元素的左上角开始计算位置的


时钟案例

这里将使用到js

代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .clock { width: 200px; height: 200px; border: 1px solid; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  } .kd { width: 1px; height: 6px; position: absolute; background: #000; top: 50%; left: 50%; margin-left: -.5px; margin-top: -3px; /* transform: translateY(-72px); */ } .h, .m, .s { height: 2px; background: #000; position: absolute; top: 50%; left: 50%; margin-top: -1px; margin-left: -10px; transform-origin: 10px 1px; } .h { width: 40px;  } .m { width: 50px; } .s { width: 55px; height: 1px; margin-top: -.5px; background: red; transform-origin: 10px .5px;

 }</style></head><body> <div class="clock"> <i class="h"></i> <i class="m"></i> <i class="s"></i> </div> <script> var clock = document.querySelector('.clock') var h = document.querySelector('.h'), m = document.querySelector('.m'), s = document.querySelector('.s') function createKd (num) { var fr = document.createDocumentFragment() for (var i = 0;i<num; i++) { var kd = document.createElement('i') kd.classList.add('kd') kd.style.transform = "rotate(" + i * 6 + "deg) translateY(-72px)" fr.appendChild(kd) } clock.appendChild(fr) }  createKd(60)

 function getDate () { var  date = new Date(), h = date.getHours(), m = date.getMinutes(), s = date.getSeconds()

 return { h: h, m: m, s: s } }

 function draw (date) { var hreg = date.h * 30 - 90, mreg = date.m * 6 - 90, sreg = date.s * 6 - 90 h.style.transform = 'rotate(' + hreg + 'deg)' m.style.transform = 'rotate(' + mreg + 'deg)' s.style.transform = 'rotate(' + sreg + 'deg)' }

 draw(getDate())

 setInterval(function () { draw(getDate()) }, 1000)</script></body></html>

页面效果

可以自己根据transition和transform写一些效果


感谢阅读与关注，会持续更新哦

以上是关于css3 2d转换的主要内容，如果未能解决你的问题，请参考以下文章

css3 中的2D转换

CSS3 2D 转换

css3 2d转换

css CSS3,2D转换

css3 2d转换

Css3之高级-5 Css转换(简介2D转换3D转换)