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

最新推荐文章于 2024-07-24 21:48:20 发布

Joker_haozi

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量246

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/Joker_haozi/article/details/104464887

版权

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.先把静态的效果做出来。
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>

Joker_haozi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS变形相应属性，制作3D相册

CSS变形相应属性变形标签:tansform 使块元素和内联块元素变形成为相应属性的值。内联元素无效果。属性：1.位移translate列：transform:translate(600px) 向右移动600个像素单位，效果跟margin-left:600px;相同。列：transform:translate(100px,100px); 两个值分别对应 x 和 y。 ...
复制链接

扫一扫