图片稍惊悚 HTML: css: 不定时更
8.HTML+CSS——鼠标经过翻转图片特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片翻转</title> <link rel="stylesheet" href="css/5-31.css"> </head> <body> <div class="box"> <div class="front"> <img src="images/ct81.jpg" alt=""> </div> <div class="back"> <img src="images/ct41.jpg" alt=""> </div> </div> </body> </html>
body { perspective: 400px; margin: 0; padding: 0; background-color: #1f4662; } .box { position: relative; width: 400px; height: 400px; margin: 100px auto; transition: all .4s; /* 让背面的紫色盒子保留立体空间 给父级添加的 */ transform-style: preserve-3d; } .box:hover { transform: rotateY(180deg); } .front, .back, img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; } .front { z-index: 1; } .back { /* 像手机一样 背靠背 旋转 */ transform: rotateY(180deg); }
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
