CSS3 transform变换、翻转图片示例

最新推荐文章于 2024-08-16 19:49:36 发布

海洋的渔夫

最新推荐文章于 2024-08-16 19:49:36 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.csdn.net/u012887259/article/details/102425599

版权

仅供学习，转载请注明出处

CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

上面的参数有很多，逐个来演示看看。

translate(x,y) 设置盒子位移

下面先写一个div，然后再写位移的效果。

下面写一个位移的效果，如下：

虽然只写一个 :hover 伪类事件的时候，也可以实现，但是也是不好的，最好再写一个变化之前的状态，然后再加一个动画效果，那么体验才好。

translateX、translateY、translateZ 设置三维移动

其实这三个参数就是单独设置上面的translate参数。那么下面来单独看看，如下：

如果单独设置Z轴移动，这样是完全看不出效果的。

需要设置perspective(设置透视距离) 才能看出正方形有种缩放的效果，其实就是越远，图案看起来越小的效果。

scale(x,y) 设置盒子缩放

首先看看原来div的大小，如下：

设置y轴放大2倍，效果如下：

那么如果，同时设置x轴缩小到0.5倍呢，效果如下：

rotate(deg) 设置盒子旋转

演示这个旋转，我画两个div，一个不变作为参照，另一个旋转看看。

可以看出，这是顺时针选择45度的效果。

其实，这个选择还可以结合另一个参数使用。就是设置旋转的中心点。

tranform-origin 设置变形的中心点

首先设置旋转的中心点在左边的中间点，如下：

再试试，右上角来看看，如下：

还可以使用像素定位的方式来确定中心点，如下：

skew(x-angle,y-angle) 设置盒子斜切

二话不说，直接上效果，如下：

rotateX、rotateY、rotateZ 设置三维旋转

简单看看Y轴的旋转效果，如下：

如果没有设置透视距离perspective，那么就只能看出一个变窄的效果。下面来增加透视距离来看看。

增加了透视距离之后，就可以看到两边距离长短不一的效果。

举例：（翻面效果）

首先准备一个图片

location_bg.jpg

实现效果如下：

好了，看完了效果，当然就要开始来逐步实现这个效果了。

首先编写div下有一张图片的效果

编写一个三维翻转180度的效果

可以看到，在翻转的时候，两边的长度一样，看不出远近的效果，此时就要增加透视距离了。

取消背景色，增加设置透视距离

此时可以看到比较好的翻转效果了。
那么下面就要设置图片翻转之后的背面效果了。
此时需要使用这个参数backface-visibility 设置盒子背面是否可见。

处理思路：首先设置图片备面不可见，然后再创建显示第二个div。

backface-visibility 设置盒子背面不可见

好了，那么怎么编写第二个div呈现到图片背后呢？

其实可以一开始就将这个新的div翻转180度，并设置不可见，然后跟着图片翻转显示，最后绝对定位重叠一起，就可以实现啦。

说那么多，来实现一下。

编写图片背后的div

好，有了这个图片说明的div，先不设置背景隐藏，做一个翻转动画先。

编写图片说明div的翻转效果

重叠两个div在中间

好了，两个div重叠在一起了，那么将上面的图片说明设置背景为隐藏即可。

设置背景图文说明隐藏

鼠标移动上去看看效果。

好了，最后规范一下，设置父元素下的子元素以3D显示。

设置父元素下的子元素以3D显示

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outside{
            width: 700px;
            height: 272px;
            /*background-color: gold;*/
            margin:50px auto;
            border: 2px solid #000;
            position: relative;
            /* 让容器里面的元素按照3d空间显示（规范写法）  */
            transform-style:preserve-3d;
        }

        .outside img{
            transform: perspective(800px) rotateY(0deg);
            transition: all 2s ease;
            backface-visibility: hidden;
            position: absolute;
            top: 0px;
            left: 200px;
        }

        .outside:hover img{
            transform: perspective(800px) rotateY(180deg);
        }

        .outside .back{
            width: 300px;
            height: 272px;
            background-color: pink;
            position: absolute;
            top: 0px;
            left: 200px;
            font-size: 20px;
            text-align: center;
            line-height: 272px;
            transform: perspective(800px) rotateY(180deg);
            transition: all 2s ease;
            backface-visibility: hidden;
        }

        .outside:hover .back{
            transform:  perspective(800px) rotateY(360deg);
        }
    </style>
</head>
<body>
    <div class="outside">
        <img src="./images/location_bg.jpg" alt="">
        <div class="back">
            图片文字说明
        </div>
    </div>
</body>
</html>