用transform属性实现元素在空间内的位移、旋转、缩放等效果(空间转换也叫3D转换)
空间位移 :transform: translate3d(x, y, z);
默认情况下,无法观察到Z轴位移效果-----因为
Z轴是视线方向,移动效果应该是距离的远或近, 电脑屏幕是平面,默认无法观察远近效果
需配合透视观察效果
透视:perspective(添加给父级)
取值:像素单位数值, 数值一般在800 – 1200。
perspective只增加近大远小、近实远虚的视觉效果。不能否呈现立体图形
空间旋转:rotate
rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
立体呈现:transform-style: preserve-3d
(添加给父级)-----使子元素处于真正的3d空间
transform-style: preserve-3d呈现立体图形
空间旋转案例----立体导航
<ul>
<li><a href="#">首页</a><a href="#">index</a></li>
<li><a href="#">登录</a><a href="#">login</a></li>
<li><a href="#">注册</a><a href="#">register</a></li>
</ul>
设置样式
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 360px;
height: 40px;
margin: 100px auto;
}
li {
transform-style: preserve-3d;
float: left;
position: relative;
list-style: none;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
transition: all 1s;
/* transform: rotatex(30deg) rotatey(30deg); */
}
li:hover {
transform: rotatex(-90deg);
}
a {
display: block;
position: absolute;
color: #fff;
text-decoration: none;
width: 120px;
height: 40px;
}
li a:nth-child(1) {
background-color: green;
transform: translateZ(20px);
z-index: 1;
}
li a:nth-child(2) {
background-color: orange;
transform: rotatex(90deg) translateZ(20px);
}
</style>
呈现效果
缩放:scale
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);