CSS3——3D转换

CSS3——3D转换

首先来看什么是3D：3D效果是元素分别在X轴，Y轴，Z轴呈现，转变

1. 3D呈现

   transform-style用来控制子元素是否开启三维立体环境
   transform-style:flat; 不开启，默认
   transform-style:preserve-3d; 开启
   代码写给父级，但影响子盒子

2. 3D透视(perspective)

   如果想要在网页中产生3D效果需要透视
   透视写在被观察元素的父盒子之上
   单位是px，数值越小，3D效果越明显

3. 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>

4. 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">

5. 过渡

   transition: all .5s;(设置0.5秒的过渡效果)