CSS

語言：

CSSSCSS

確定

@import url(http://fonts.googleapis.com/css?family=Playfair+Display);

body {

background: #edf2f4;

-webkit-perspective: 1000;

perspective: 1000;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

height: 100vh;

font-family: "Playfair Display", georgia, serif;

}

.card {

pointer-events: none;

-webkit-transform: translateZ(0);

transform: translateZ(0);

padding: 30px;

background: white;

border-radius: 5px;

width: 400px;

height: 200px;

margin: auto;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

position: relative;

}

.card:after {

content: " ";

position: absolute;

width: 100%;

height: 10px;

border-radius: 50%;

left: 0;

bottom: -50px;

box-shadow: 0 30px 20px rgba(0, 0, 0, 0.3);

}

.card .card-content {

margin: auto;

text-align: center;

}

.card h1 {

-webkit-transform: translateZ(100px);

transform: translateZ(100px);

}

.card small {

-webkit-transform: translateZ(50px);

transform: translateZ(50px);

display: block;

}

.card a {

color: #69c6b8;

pointer-events: auto;

}

總結

以上是生活随笔為你收集整理的html 鼠标移动3d视图,HTML5 鼠标悬停3D平面摇晃动效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。