CSS3——3D转换
首先来看什么是3D:3D效果是元素分别在X轴,Y轴,Z轴呈现,转变
-
3D呈现
transform-style用来控制子元素是否开启三维立体环境
transform-style:flat; 不开启,默认
transform-style:preserve-3d; 开启
代码写给父级,但影响子盒子 -
3D透视(perspective)
如果想要在网页中产生3D效果需要透视
透视写在被观察元素的父盒子之上
单位是px,数值越小,3D效果越明显 -
3D位移
transform:translate3d(x,y,z) 简写
transform:translateX();
transform:translateY();
transform:translateZ;(单位通常是px)
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all 5s;//设置5秒的过渡效果
}
div:hover {
transform: translate3d(400px, 100px, 100px);//鼠标移动到div元素上,元素在X方向移动400px,在Y方向移动100px,在Z方向移动100px
}
<div></div>
-
3D旋转
transform:rotateX(deg);
transform:rotateY(deg);
transform:rotateZ(deg);
transform:rotate3d(x,y,z,deg);(简写)
body {
perspective: 100px;
transform-style: preserve-3d;
}
img {
display: block;
width: 250px;
margin: 150px auto;
transition: all 2s;//设置2秒的过渡效果
}
img:hover {
transform: rotateX(45deg);/鼠标移动到img元素上,元素绕X轴顺时针旋转45°
}
<img src="自行车.jpg">
-
过渡
transition: all .5s;(设置0.5秒的过渡效果)