CSS3 transform变换、翻转图片示例

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

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显示

完整代码如下：

    
    
    


    

        
        

            图片文字说明
        
    

---

2019年全套Java、Android、HTML5前端、Python、大数据视频，价值数万资源大放送

寻找资源的地址如下：

扫描微信公众号

寻找价值数万的视频资源