案例+transform属性

火影忍者案例

tt0.top-555908.gif

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火影忍者案例</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3243703_1bbkz2sfjj.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
        }
        
        a {
            position: relative;
            display: block;
            text-decoration: none;
            color: #333;
            height: 225px;
            width: 400px;
            overflow: hidden;
            border-radius: 3%;
        }
        
        a::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, transparent, skyblue);
            z-index: 1;
            opacity: 0;
            transition: all 3s;
        }
        
        a img {
            width: 400px;
            height: 225px;
            transition: all 3s;
        }
        
        a .text {
            position: absolute;
            padding: 0px 12px;
            bottom: 0px;
            transform: translateY(19px);
            color: red;
            transition: all 3s;
            z-index: 2;
        }
        
        a img:hover {
            transform: scale(1.3);
        }
        
        a:hover .text {
            transform: translateY(0px);
        }
        
        a:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body>
    <a href="#">
        <img src="./images/1.jpeg" alt="">
        <div class="text">
            <h3>火影忍者</h3>
            <p>在第四次世界大战中，斑爷站在岩壁上对着药师兜说过：“你见过我的全盛状态？”</p>
            <p>请让我见识一下 <i class="iconfont icon-arrow-right"></i></p>
        </div>
    </a>
    <a href="#"> <img src="./images/2.jpeg" alt="">
        <div class="text">
            <h3>火影忍者</h3>
            <p>在第四次世界大战中，斑爷站在岩壁上对着药师兜说过：“你见过我的全盛状态？”</p>
            <p>请让我见识一下 <i class="iconfont icon-arrow-right"></i></p>
        </div>
    </a>
    <a href="#"> <img src="./images/3.jpeg" alt="">
        <div class="text">
            <h3>火影忍者</h3>
            <p>在第四次世界大战中，斑爷站在岩壁上对着药师兜说过：“你见过我的全盛状态？”</p>
            <p>请让我见识一下 <i class="iconfont icon-arrow-right"></i></p>
        </div>
    </a>

</body>

</html>

补充的知识点：

（1）a标签如果没有设置宽高，就会是一个容器，会受图片的影响扩大。

（2）当鼠标放在a标签这个盒子上，会出现一个从上而下渐变的遮罩层。在这其中，遮罩层并不是用透明度做的效果，而是背景透明色的效果。

就是利用背景图片渐变中的透明到蓝色的过程 + 透明度

（ background-image: linear-gradient(to bottom,transparent, skyblue);）+（opacity: 0;）。

而不是利用背景图片渐变中的白色到蓝色的过程 + 透明度

（ background-image: linear-gradient(to bottom,white, skyblue);）+（opacity: 0;）。

（3）代码优化

在 a .text 和 a:hover .text 中用了 transform 属性，主要是因为其性能比方位名词好。

（4）背景图片渐变没有过渡效果

想要实现鼠标移入图片切换的渐变过程：

div里面包装两个图片标签（换另外的思路来时先这个功能）

1 先让一个图片隐藏一个图片显示

2 div hover 再让另外一个图片隐藏另外一个图片显示

3 定位加透明度来实现透明度有过渡。

案例图：

tt0.top-453854.gif

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火影忍者案例</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3243703_1bbkz2sfjj.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
        }
        
        div {
            height: 225px;
            width: 400px;
            position: relative;
        }
        
        .pic1,
        .pic2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: 3s;
        }
        
        .pic1 {
            opacity: 1;
        }
        
        .pic2 {
            opacity: 0;
        }
        
        div:hover .pic1 {
            opacity: 0;
        }
        
        div:hover .pic2 {
            opacity: 1;
        }
    </style>
</head>

<body>

    <div>
        <img src="./images/1.jpeg" class="pic1">
        <img src="./images/2.jpeg" class="pic2">
    </div>
</body>

</html>

transform属性（2D平面，3D空间）

位移（translate）：

translateX：向左向右移动。
translateY：向上向下移动。（向下为正）
translateZ：向里面向外面移动（加上视距 perspective: 1000px;，就可以看出前后移动的效果，近大远小）

tt0.top-465940.gif

translate3d(x,y,z)：定义3D转换

旋转（rotate）：

rotateX：在x轴翻转，（左手法则，左手大拇指所指的方向，即为正方向（向右）。水平方向，大拇指指向右边，其余手指弯曲的方向即为翻转的方向）
rotateY：在y轴翻转，不过向下为正方向，（左手法则，左手大拇指所指的方向，即为正方向（向下），大拇指指向下边，其余手指弯曲的方向即为翻转的方向
rotateZ：在z轴翻转，向前为正方向，可以想象屏幕就是一面镜子，里面有个人用食指指向你的胸口方向，他的食指所指方向为正方向。（左手法则，左手大拇指所指的方向，即为正方向（自身胸口的位置），其余手指弯曲的方向就是翻转的方向）
rotate3d(x,y,z)：3D图形的翻转（角度翻转），需要开启3d空间（在父元素添加 transform-style: preserve-3d; ）

缩放（scale）:

scale()：里面放参数，正数是放大，负数为缩小，放大与缩小都是按照原图像的倍数去放大。

scale3d()：3D图形的放大与缩小

其他：

1.改变旋转的原点中心（perspective-origin）：值可以为参数，可以是方位名词

参数： transform-origin: 0px 0px;

方位名词： transform-origin: left top;

2.呈现立体空间： transform-style: preserve-3d;

注意：在父元素添加。

3.视距：persepective 看见近大远小的效果

4.左手法则，根据左手来判断物体旋转的方向。

我的移动web学习第二天