练习二：transform实例
2019-05-08 本文已影响0人
joyitsai
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 设置盒子背面是否可见
实例：翻面效果
GIF.gif
- 主要思路：
1.先对图像元素和说明性文字元素进行绝对定位，使他们在同一位置
2.将图片transform的rotateY设置成0°，表示初始显示在正面；而说明性文字的rotateY设置成-180°，表示初始显示在反面
3.分别将图片元素和说明性文字的backface-visibility设置为hidden，无论初始状态，还是翻转后，背面（rotateY不为0）的元素始终不可见
4.分别在图像元素和说明性文字元素上设置一个过渡动画效果更好看些。 - 示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>翻转动画的实例</title>
<style type="text/css">
.box{
width: 250px;
height: 300px;
margin: 100px auto;
transform-style:preserve-3d;
position: relative;
}
.box .pic{
width: 250px;
height: 300px;
position: absolute;
left: 0;
top: 0;
transform: perspective(800px) rotateY(0deg);
backface-visibility: hidden;
transition: all 1s ease;
}
.box .pic img{
width: 100%;
height: 100%;
border-radius: 5px;
}
.box .back_info{
width: 250px;
height: 300px;
position: absolute;
left: 0;
top: 0;
background-color: rgba(200, 100, 80);
border-radius: 5px;
transform: perspective(800px) rotateY(-180deg);
backface-visibility: hidden;
transition: all 1s ease;
}
.box:hover .pic{
transform: perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform: perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="../css/003.jpg"></div>
<div class="back_info">说明性文字</div>
</div>
</body>
</html>
