3D
1.属性
perspective :透距离,单位像素(值越小,透视距离越近,效果越明显):设置父元素上
perspective-origin: 设置透视点的位置
transform-style :指定某元素的子元素是位于三维空间内,取值:flat | preserve-3d
2.坐标
3.方位
4.实例
4.1翻转幻灯片
4.1.1效果
4.1.2思路
(1)给div设置4个img
<div id="box">
<img src="images/banner1.jpg">
<img src="images/banner2.jpg">
<img src="images/banner3.jpg">
<img src="images/banner4.jpg">
</div>
(2)设置img为绝对布局
#box img{
position: absolute;
top: 0;
left: 0;
}
(3)设置img的空间坐标,使其形成一个3D长方体
img:nth-of-type(1) {
transform: rotateX(0deg) translateZ(125px);
}
img:nth-of-type(2) {
transform: rotateX(-90deg) translateZ(125px);
}
img:nth-of-type(3) {
transform: rotateX(-180deg) translateZ(125px);
}
img:nth-of-type(4) {
transform: rotateX(-270deg) translateZ(125px);
}
(4)父元素给img提供三维空间
transform-style: preserve-3d;
4.1.3源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻转滚动幻灯片</title>
<style>
#box{
margin: 100px auto;
width:600px;
height: 250px;
position: relative;
transition: transform 2s;
transform-style: preserve-3d;
}
#box img{
position: absolute;
top: 0;
left: 0;
}
img:nth-of-type(1) {
transform: rotateX(0deg) translateZ(125px);
}
img:nth-of-type(2) {
transform: rotateX(-90deg) translateZ(125px);
}
img:nth-of-type(3) {
transform: rotateX(-180deg) translateZ(125px);
}
img:nth-of-type(4)