CSS3 3D效果基础版本

3D变换,3个属性

transform-style: prevserve-3d ;建立3D空间，必须是父元素,运动的元素没法建立
perspective:数字景深
perspective-origin 景深基点: 视线是从哪个方向看过去的
transform : 新增函数
- rotateX() 旋转X轴类似单杠
- rotateY() 旋转Y轴类似钢管舞
- rotateZ() 旋转Z轴类似水平翻转
- translateZ() 位移Z轴，简单来说就是近大远小
- scaleZ() 放大

这里特别提醒用了3D空间必须加相对定位

围绕X轴旋转

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content="text/html; charset=utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>3D旋转</title>
</head>
<style>
    *{margin:0px;padding:0px;}
    h1{margin:10px auto;position:absolute;left:50%;top:0px;-webkit-transform: translate(-50%,0);}
    div{width:100px;height:100px;padding:100px;border:10px solid black;-webkit-perspective: 50px;-webkit-transform-style: preserve-3d;}
    p{width:100px;height:100px;background:red;transition: 2s;}
    div:hover p {
        -webkit-transform: rotateX(180deg);
    }
</style>
<body>
<h1>鼠标放到框子上面就会变形</h1>
  <div>
      <p>

      </p>
  </div>
</body>
</html>

效果图

围绕X轴旋转.gif

绕Y轴旋转

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content="text/html; charset=utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>绕Y轴旋转</title>
</head>
<style>
    *{margin:0px;padding:0px;}
    div{width:100px;height:100px;padding: 100px;border:10px solid blanchedalmond;-webkit-transform-style: preserve-3d;-webkit-perspective: 100px;margin:0 auto;}
    p{width:100px;height:100px;background:red;transition: 2s;line-height:100px;text-align:center;}
    p span{transition: 1s;}
    div:hover p{-webkit-transform: rotateY(180deg) ;}
    div:hover p span{-webkit-transform: rotateY(-180deg) ;display:block;}
</style>
<body>
  <div>
       <p>
           <span>2</span>
       </p>
  </div>
<!--小提示要是里面的文字不转的话可以给里面的文字设定一个包裹层这样也旋转了-->
</body>
</html>

效果图

围绕y轴旋转.gif

绕Z轴旋转

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content="text/html; charset=utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>TranslateZ</title>
</head>
<style>
    *{margin:0px;padding:0px;}
    div{width:100px;height:100px;padding:100px;margin:0 auto;border:10px solid #ccc;-webkit-perspective: 100px;-webkit-transform-style: preserve-3d;}
    p{width:100px;height:100px;background:red;transition: 2s;}
    div:hover p {-webkit-transform: translateZ(-100px);}
</style>
<body>
<div>
    <p>
        1
    </p>
</div>
</body>
</html>

效果图近大远小

围绕Z轴旋转.gif

CSS3 3D效果基础版本

推荐阅读更多精彩内容