CSS3 3D对话框

①我是觉得这之类的特效好玩来分享给大家

②源代码分享给大家

-------->可以先运行一遍哦

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 3D对话框</title>
<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 18px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  background-color: #f5f5f5;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.description {
  margin-top: 50px;
  text-align: center;
  color: #999;
  transition: opacity 0.3s ease; }

.description a {
  color: #4A9DF6;
  text-decoration: none; }

.btn.is-open ~ .description {
  opacity: 0; }

.btn {
  display: block;
  position: relative;
  width: 200px;
  height: 80px;
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  text-align: center; }

.btn-front {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 80px;
  background-color: #F44336;
  color: #fff;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1); }

.btn-front:hover {
  background-color: #f77066; }

.btn.is-open .btn-front {
  pointer-events: none;
  line-height: 160px; }

.btn-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
  color: #222;
  -webkit-transform: translateZ(-1px) rotateX(180deg);
          transform: translateZ(-1px) rotateX(180deg);
  overflow: hidden;
  transition: box-shadow 0.8s ease; }

.btn-back p {
  margin-top: 27px;
  margin-bottom: 25px; }

.btn-back button {
  padding: 12px 20px;
  width: 30%;
  margin: 0 5px;
  background-color: transparent;
  border: 0;
  border-radius: 2px;
  font-size: 1em;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: background 0.15s ease; }
  .btn-back button:focus {
    outline: 0; }
  .btn-back button.yes {
    background-color: #2196F3;
    color: #fff; }
    .btn-back button.yes:hover {
      background-color: #51aef6; }
  .btn-back button.no {
    color: #2196F3; }
    .btn-back button.no:hover {
      background-color: #ddd; }

.btn.is-open .btn-back {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); }

.btn[data-direction="left"] .btn-back, .btn[data-direction="right"] .btn-back {
  -webkit-transform: translateZ(-1px) rotateY(180deg);
          transform: translateZ(-1px) rotateY(180deg); }

.btn.is-open {
  width: 400px;
  height: 160px; }

.btn[data-direction="top"].is-open {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg); }

.btn[data-direction="right"].is-open {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }

.btn[data-direction="bottom"].is-open {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg); }

.btn[data-direction="left"].is-open {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg); }

</style>
</head>
<body>
    <div class="btn">
        <div class="btn-back">
            <p>是否前往南途的博客下载更多源码?</p>
            <a href="https://www.cnblogs.com/varchar-pig/"><button class="yes">Yes</button></a>
            <a href="http://127.0.0.1:8020/layui/index30.html?__hbt=1609595918824"></a><button class="no">No</button>
        </div>
        <div class="btn-front">前往下载源码</div>
    </div>
    <!--<p class="description">在按钮的不同部位点击会有不同的过渡动画效果！</p>    -->
<script>
window.onload = function() {
    var btn = document.querySelector( '.btn' );
    var btnFront = btn.querySelector( '.btn-front' ),
        btnYes = btn.querySelector( '.btn-back .yes' ),
        btnNo = btn.querySelector( '.btn-back .no' );
    btnFront.addEventListener( 'click', function( event ) {
        var mx = event.clientX - btn.offsetLeft,
            my = event.clientY - btn.offsetTop;
        var w = btn.offsetWidth,
            h = btn.offsetHeight;
        var directions = [
            { id: 'top', x: w/2, y: 0 },
            { id: 'right', x: w, y: h/2 },
            { id: 'bottom', x: w/2, y: h },
            { id: 'left', x: 0, y: h/2 }
        ];
        directions.sort( function( a, b ) {
            return distance( mx, my, a.x, a.y ) - distance( mx, my, b.x, b.y );
        } );
        btn.setAttribute( 'data-direction', directions.shift().id );
        btn.classList.add( 'is-open' );
    } );
    btnYes.addEventListener( 'click', function( event ) {
        btn.classList.remove( 'is-open' );
    } );
    btnNo.addEventListener( 'click', function( event ) {
        btn.classList.remove( 'is-open' );
    } );
    function distance( x1, y1, x2, y2 ) {
        var dx = x1-x2;
        var dy = y1-y2;
        return Math.sqrt( dx*dx + dy*dy );
    }
};
</script>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------------感谢观看！期待您的下次光临！

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/varchar-pig/p/14224224.html