CSS变形相应属性,制作3D相册

CSS变形相应属性

变形标签:tansform 使块元素和内联块元素变形成为相应属性的值。内联元素无效果。
属性:1.位移translate

列:transform:translate(600px)

      向右移动600个像素单位,效果跟margin-left:600px;相同。

列:transform:translate(100px,100px); 两个值 分别对应 x 和 y。

      向右移动100个像素单位,向上移动100个像素单位。

translate也可以只针对一个轴来位移,对应X,Y,Z三个轴;

列:transform:translateX(600px); 沿X轴位移600像素
transform:translateY(600px); 沿Y轴位移600像素
transform:translateZ(600px); 沿Z轴位移600像素

        注意:取值也可为负值,沿X、Y、Z负方向位移
        其中Z轴设置位移后在2D中不显示,只有在3D中才能看见位移。

属性:2.缩放scale
transform:scale(num) num是一个比例值,正常比例是1。

 <style>
        #box{width:300px;height:300px;transform:scale(2);background:red;}
        
    </style>
</head>
<body>
     <div id="box">
         测试文字
     </div>
</body>

上述中div的大小就为高600px,宽600px。

transform:scale(num1 , num2) 两个值 分别对应 宽和高

同样的缩放也可以只针对一个轴设置:
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d时的厚度)

   也可以为负值。当scale为负值时 如:-1,则这个块会反转180°呈现

属性:3.旋转rotate
transform:rotate(num) num是旋转的角度 30deg
正值:顺时针旋转
负值:逆时针旋转
表示一个角:角度deg 或 弧度rad
360°=2Π=6.28rad

    rotateX()    ( 3d )
    rotateY()    ( 3d )
    rotateZ()  
    注 : rotate()跟rotateZ()是等价关系。

属性:4. 斜切skew
transform:skew(num1,num2) : num1和num2都是角度,针对的是x 和 y
transform:skewX()
transform:skewY()
注:skew没有3d写法。

注:所有的变形操作,都不会影响到其他元素。(类似于相对定位)
注:变形操作对inline(内联元素)不起作用的。
注:transform可以同时设置多个值。
    先执行后面的值,后执行前面的值。
    位移会受到后面要执行的缩放、旋转和斜切的影响。

4. 基点位置tranform-origin

主要是针对 旋转和缩放,默认都是中心点为基点。

  1. 想做特效

    要确定:起点值和结束值。

    套路:1.先把静态的效果做出来。
    2. 把要运动的终点位置先做出。
    3. 指定 tranform变形中对应的 0 值 ( 结束点位置 ).
    4. 写 tranform变形的起点值 (起点的位置)

在这里插入图片描述
通过逆战班的学习,两周就能做出漂亮的旋转相册。

<!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>
        *{margin: 0;padding: 0;}
        ul{list-style:none;}
        img{display: block;width:128px;
height:94px;}
        
        body{width: 100%;height: 1000px;}
        #main{width:128px;height:94px;margin: 200px 50%;transform: translateX(-47px);perspective:600px;perspective-origin:right top;transform-style:preserve-3d;}
        #main ul{position: relative;transition: 3s linear;transform-style: preserve-3d;}
        #main ul li{position: absolute;transform-origin:center center;}
        #main ul img{-webkit-box-reflect:below 3px linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.4))
            ;}
        #main ul li:nth-of-type(1){transform:rotateY(0deg) translateZ(128px);}
        #main ul li:nth-of-type(2){transform:rotateY(60deg) translateZ(128px);}
        #main ul li:nth-of-type(3){transform:rotateY(120deg) translateZ(128Px);}
        #main ul li:nth-of-type(4){transform:rotateY(180deg) translateZ(128Px);}
        #main ul li:nth-of-type(5){transform:rotateY(240deg) translateZ(128Px);}
        #main ul li:nth-of-type(6){transform:rotateY(300deg) translateZ(128Px);}
        #main:hover ul{transform: rotateY(360deg);}
        
    </style>
</head>
<body>
    <div id="main">
        <ul>
            <li><img src="./1.jpg" alt=""></li>
            <li><img src="./2.jpg" alt=""></li>
            <li><img src="./3.jpg" alt=""></li>
            <li><img src="./4.jpg" alt=""></li>
            <li><img src="./laoli.jpg" alt=""></li>
            <li><img src="./xiuqin.jpg" alt=""></li>
           
            
            
        </ul>
    </div>
    
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值