【前端】【html5/css3】前端学习之路(三)(CSS3 2D变形/CSS3 3D变形/CSS3浏览器前缀)

一、2D变形(CSS3) transform

transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

1.移动【  translate(x, y)  】

translate是移动、平移的意思,也就是在2D平面内以X轴和Y轴为标准进行移动。

格式(x和y可为负值):

 translate(xpx,ypx):水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
 translateX(xpx):仅水平方向移动(X轴移动)
 translateY(ypx):仅垂直方向移动(Y轴移动)

 translate可以用来让已经定位的盒子水平垂直居中。

以前的水平居中方式:

.box {
            width: 499.9999px;
            height: 400px;
            background: pink;
            position: absolute;
            left:50%;
            top:50%;
            /*让盒子在X轴和Y轴都走自己的一半,以达到居中的目的*/
            margin-top: -200px;
            margin-left: -250px;
        }

用translate方式水平垂直居中:

.box {
            width: 499.9999px;
            height: 400px;
            background: pink;
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);  /* 走的自己的一半 */
        }

2.缩放【  scale(x, y)  】

格式:

transform:scale(0.8,1);

可以对元素进行水平/垂直方向的缩放,以上语句的意思是  该元素在水平方向上缩小了20%,垂直方向上不变

scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(x)元素仅水平方向缩放(X轴缩放)
scaleY(y)元素仅垂直方向缩放(Y轴缩放)

 scale的默认值为1,数值为0-0.99时该元素缩小,>1时该元素方法。

3.旋转【  rotate(x deg)  】

对元素进行旋转,正值为顺时针,负值为逆时针。

格式:

transform:rotate(45deg);

 注意deg是度数

4.transform-origin调整元素转换变形的原点

scale/rotate都可以用t-r来规定发生变化的原点。

 示例:

rotate:

        div {
            width: 500px;
            height: 300px;
            background-color: red;
            transition: all 0.5s;
            transform-origin: right top;
            margin: 100px auto;
        }
        div:hover {
            transform: rotate(180deg);
        }

scale: 

div {
            width: 500px;
            height: 300px;
            background-color: red;
            transition: all 0.5s;
            transform-origin: right top;
            margin: 100px auto;
        }
        div:hover {
            transform: scale(2);
        }

自行测试。

案例:

目标效果:

图片:

 

代码:

       div {
            width: 225px;
            height: 150px;
            margin: 300px auto;
            position: relative;
        }
        img {
            width: 225px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: top right;
            transition: all 0.5s;
        }
        div:hover img:first-child {
            transform: rotate(60deg);
        }
        div:hover img:nth-child(2) {
            transform: rotate(120deg);
        }
        div:hover img:nth-child(3) {
            transform: rotate(180deg);
        }
        div:hover img:nth-child(4) {
            transform: rotate(240deg);
        }
        div:hover img:nth-child(5) {
            transform: rotate(300deg);
        }
        div:hover img:last-child {
            transform: rotate(360deg);
        }

 

<div>
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <img src="images/4.jpg" alt="">
    <img src="images/5.jpg" alt="">
    <img src="images/6.jpg" alt="">
</div>

5.倾斜【   skew(x deg, y deg)   】

格式:

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度,处置方向保持不变。

可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0。

二、3D变形(CSS3) transform

                                            3D运用比较少,后期基本都用JS制作3D效果,所以了解一下就可以。

2D指的是 X轴和Y轴

3D指的是 X轴  Y轴  Z轴

伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

 CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180度,如下图

1.旋转【rotate】

(1)rotateX()

也就是沿着X轴立体旋转。

示例:

图片:

代码: 

img {
            transition:all 0.5s ease 0s;
        }
        img:hover {

            transform:rotateX(180deg);
        }
<div>
    <img src="images/x.jpg" alt="">
</div>

(2)rotateY()

沿着Y轴立体旋转

示例:

图片:

代码:

img {
            transition:all 0.5s ease 0s;
        }
        img:hover {
            /*transform:rotateX(180deg);*/
            transform:rotateY(180deg);
        }

 

<div>
    <!--<img src="images/x.jpg" alt="">-->
    <img src="images/1498446043198.png" alt="">
</div>

(3)rotateZ()

沿着Z轴旋转。

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

2.透视(perspective)

电脑显示屏是一个2D界面,之所以有3D效果,靠的是透视效果。

透视距离原理:近大远小

 示例:

body {
		perspective: 500px;
}
img {
		transition: all 5s;
}
img:hover {
		transform: rotateY(360deg);
}
<img src="images/1498446043198.png" alt="">

效果自行测试,图片上方已有。

3.移动【translate】

(1)translateX(x) / translateY(y) 已经讲过,此处不再赘述。

(2)translateZ(z) 

transformZ的直观表现形式就是大小变化,实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近,在这里参照物就是perspective属性)。

比如设置了perspective为200px;那么transformZ的值越接近200,就是离的越近,看上去也就越大,超过200就看不到了,因为相当于跑到后脑勺去了,我相信你正常情况下,是看不到自己的后脑勺的。

(3)translate3d(x, y, z)

其中x和y可以是长度值也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度,而z只能设置长度值。

(4)backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

案例:

代码:

        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 224px;
            height: 224px;
        }
        img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 4s;

        }
        /*第二个img进行了180度翻转,因为设置了不面向屏幕则隐藏,所以一旦翻转不面向,则隐藏,就露出了背面的第二张图片。*/
        img:last-child {
            backface-visibility: hidden;
        }
        div:hover img {
            -webkit-transform: rotateY(180deg);
        }
<div>
    <img src="images/qian.svg" alt="">
    <img src="images/hou.svg" alt="">
</div>

效果:

鼠标经过前:

鼠标经过后:

三、浏览器前缀

 为了适应不同浏览器的兼容性,在新增的CSS3的属性都会增加前缀:

例如在webstrom中,如果输入transform:

点击tab后:

会自动为你填充格式。

需要注意一下在动画keyframs中,-webkit-并不是前缀,而是放在@符号之后:

 

展开阅读全文

没有更多推荐了,返回首页