css翻页技巧

深藏阁楼爱情的钟 2022-05-23 12:19 253阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="gb-2312">
            <title></title>
            <style type="text/css"> *{ padding: 0; margin: 0; } .cube-box{ cursor: pointer; position: relative; display: block; width: 100px; height: 100px; perspective:3000px; transform-style: preserve-3d; -webkit-transform-style:preserve-3d; transition: transform 0.4s linear 0s; -webkit-transition:-webkit-transform 0.4s linear 0s; transform: rotateY(0deg); -webkit-transform:rotateY(0deg); } .cube-box>div{ position: absolute; display: block; width:100%; height: 100%; line-height: 100px; text-align: center; text-decoration: none; color: white; font-size: 30px; box-shadow: 5px 5px 20px 5px #cacaca; } .cube-box .cube-normal{ /*-webkit-transform: translateZ(100px); transform:translateZ(100px);*/ background-color: black; } .cube-box .cube-hover{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); background-color:burlywood; } .cube-box:hover{ transform: rotateY(-180deg); -webkit-transform:rotateY(-180deg); } </style>
            <script src="developWorkplace/src/common/005eqxCommon.js"></script>
        </head>
        <body>
                <div class="ss">
                    <div class="cube-box">
                        <div class="cube-normal">body</div>
                        <div class="cube-hover">girl</div>
                    </div>
                 </div>
        </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关 DIV+CSS的经典翻页代码

DIV+CSS部分截图展示 ![部分内容][20150917102312466] @author -张相逢代码 <!DOCTYPE html PUBL

以你之姓@/ 2022年08月08日 14:45/ 0 赞/ 167 阅读

相关 Page翻页分页css代码，分页div+css代码

css分页代码集合模板如下翻页上下分页按钮效果一 ![20141222110027656][] DIV代码： <table styl

朴灿烈づ我的快乐病毒、/ 2022年08月06日 04:23/ 0 赞/ 254 阅读

相关整页翻屏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

约定不等于承诺〃/ 2022年05月31日 07:26/ 0 赞/ 230 阅读

相关 css翻页技巧

<!DOCTYPE html> <html> <head> <meta charset="gb-2312">

深藏阁楼爱情的钟/ 2022年05月23日 12:19/ 0 赞/ 254 阅读

相关纯CSS代码实现翻页(两个示例)

示例1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN""http://www.w3.org/TR/xh

ゝ一世哀愁。/ 2022年04月23日 10:10/ 0 赞/ 273 阅读

相关 vim 翻页命令

整页翻页 ctrl-f：向下翻一页 f含义：forword ctrl-b：向上翻一页 b含义：backward 翻半页 ctrl-d：向下翻半页

偏执的太偏执、/ 2022年01月07日 08:15/ 0 赞/ 342 阅读

相关翻页文字特效

@import url(https://fonts.googleapis.com/css?family=Lato:900); , :before, :after

快来打我*/ 2021年12月24日 00:23/ 0 赞/ 356 阅读

相关翻页

package mb.utils; import java.util.ArrayList; import java.util.List;

短命女/ 2021年09月23日 06:22/ 0 赞/ 461 阅读

相关 Bootstrap之翻页

Bootstrap之翻页。 > 优点： > > 1. 支持局部刷新； > 2. 只要是列表，都可以加载该组件； > 3. 支持动态数据绑定； > 4. 当然还有绝对

电玩女神/ 2021年09月10日 15:24/ 0 赞/ 454 阅读

相关 js css3翻页数字时钟代码

下载地址：[https://download.csdn.net/download/liming1016/12407089][https_download.csdn.net_do

电玩女神/ 2021年07月26日 16:43/ 0 赞/ 481 阅读