transform 的旋转 ，3d效果，要添加3d效果的父级加上景深perspective。 3d效果的容器加上 transform-style：preserve-3d。...

该技术用于创建一个多维的数据，在这个实例中使用了两个元素用于正面和反面。前面用来放置产品图片，底部用来放置产品信息。默认情况下产品信息隐藏起来，同时鼠标悬停在产品图片上时，隐藏在底部的产品信息在X轴放置-90度和Z轴旋转，使底部的信息旋转置于顶部，从而达到我们需要的效果，产品图片隐藏，产品信息显示。如图所示：

使用两个标签包裹产品图片和产品信息，第一个主要用来设置3D视点perspective，旨在设置用户有画布的视距；第二个包裹容器主要用来包裹图片和产品信息。当鼠标悬浮在这个容器上时，会沿X轴旋转，将产品信息显示出来。在三维旋转中，我们常的一种结构：

舞台=>div.wrapper
    容器=>div.item
        产品图片＝>img
        产品信息=>span.information

在我们的实例中使用的结构是：

接下来完成这个实例的样式。首先给每个wrapper容器设置display:inline-block和perspective：4000px，同时给item设置transform-style:preserve-3d让他的子元素具有一个3D位置。并且为了效果能更加完美，在例中添加了CSS3的transition属性：

.wrapper {
    display: inline-block;
    width: 310px;
    height: 100px;
    vertical-align: top;
    margin: 1em 1.5em 2em 0;
    cursor: pointer;
    position: relative;
    font-family: Tahoma, Arial;
    -webkit-perspective: 4000px;
       -moz-perspective: 4000px;
        -ms-perspective: 4000px;
         -o-perspective: 4000px;
            perspective: 4000px;
  }

  .item {
    height: 100px;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform .6s;
         -moz-transition: -moz-transform .6s;
          -ms-transition: -ms-transform .6s;
           -o-transition: -o-transform .6s;
              transition: transform .6s;
  }
接下来给产品图片设置一个Z轴位移，给产品信息设置一个X轴旋转和Z轴位移，为了效果更加完美，还添加了一些其他的装饰样式：

.item img {
  display: block;
  position: absolute;
  top: 0;
  border-radius: 3px;
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  -webkit-transform: translateZ(50px);
     -moz-transform: translateZ(50px);
      -ms-transform: translateZ(50px);
       -o-transform: translateZ(50px);
          transform: translateZ(50px);
  -webkit-transition: all .6s;
     -moz-transition: all .6s;
      -ms-transition: all .6s;
       -o-transition: all .6s;
          transition: all .6s;
}
.item .information {
  display: block;
  position: absolute;
  top: 0;
  height: 80px;
  width: 290px;
  text-align: left;
  border-radius: 15px;
  padding: 10px;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  box-shadow: none;
  background: rgb(236,241,244);
  background: -webkit-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  background: -ms-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
     -moz-transform: rotateX(-90deg) translateZ(50px);
      -ms-transform: rotateX(-90deg) translateZ(50px);
       -o-transform: rotateX(-90deg) translateZ(50px);
          transform: rotateX(-90deg) translateZ(50px);
  -webkit-transition: all .6s;
     -moz-transition: all .6s;
      -ms-transition: all .6s;-o-transition: all .6s;transition: all .6s;}
最后来完成用户鼠标悬浮在产品图片上时，旋转隐藏产品图片，同时产品信息旋转显示出来：

.item:hover {
  -webkit-transform: translateZ(-50px) rotateX(95deg);
     -moz-transform: translateZ(-50px) rotateX(95deg);
      -ms-transform: translateZ(-50px) rotateX(95deg);
       -o-transform: translateZ(-50px) rotateX(95deg);
          transform: translateZ(-50px) rotateX(95deg);
}

  .item:hover img {
    box-shadow: none;
    border-radius: 15px;
  }

  .item:hover .information {
    box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
    border-radius: 3px;
  }

 

到此整个实例的效果就全部完成了，由于篇幅问题，这里不展示所有代码，如果您对这个实例感兴趣，可以点击DEMO或下载源码自己分析。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/css3-3d-transform.html © w3cplus.com

转载于:https://www.cnblogs.com/gaidalou/p/7685452.html