关于css过渡和3D效果的简单实现
Jun 20, 2018 pm 04:15 PM下面为大家带来一篇css过渡+3D效果的简单实现。内容挺不错的，现在就分享给大家，也给大家做个参考。
css过渡+3D效果的简单实现
<!DOCTYPE html>
<html>
<head>
<title>guodu</title>
<meta charset="utf-8">
<style type="text/css">
#wp{
border: 1px solid red;
width: 500px;
height: 500px;
background-color: pink;
color: lime;
transition-property: background color;
transition-duration: 5s;
transition-timing-function: cubic-bezier(0 0 0.2 0.2);
transition-delay: 1s;
transform: perspective(600px);
}
#wp:hover{
background: red;
color: white;
width: 800px;
transform-origin: (150px 100px 120px);
transform: skewY(80deg) rotate(45deg) translate(50%) ;
}
</style>
</head>
<body>
<p id="wp"><h1>南海是中国的，菲律宾也是中国的</h1></p>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何基于CSS3和jQuery实现APPLE TV海报视差的效果
Atas ialah kandungan terperinci 关于css过渡和3D效果的简单实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah maksud pemegang tempat dalam vue
May 07, 2024 am 09:57 AM
Apakah maksud pemegang tempat dalam vue
Bagaimana untuk menulis ruang dalam vue
Apr 30, 2024 am 05:42 AM
Bagaimana untuk menulis ruang dalam vue
Terkini dari Universiti Oxford |. Bercakap tentang ulasan terkini model bahasa besar dan dunia tiga dimensi
Jun 02, 2024 pm 07:41 PM
Terkini dari Universiti Oxford |. Bercakap tentang ulasan terkini model bahasa besar dan dunia tiga dimensi
LLM sudah selesai! OmniDrive: Mengintegrasikan persepsi 3D dan perancangan penaakulan (terbaharu NVIDIA)
May 09, 2024 pm 04:55 PM
LLM sudah selesai! OmniDrive: Mengintegrasikan persepsi 3D dan perancangan penaakulan (terbaharu NVIDIA)
Bagaimana untuk memperkenalkan imej ke dalam vue
May 02, 2024 pm 10:48 PM
Bagaimana untuk memperkenalkan imej ke dalam vue
