CSS旋轉效果

阿新 • • 發佈：2019-01-04

效果圖：
CSS旋轉效果

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS旋轉效果</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        /*設定外中內三層div的大小一致*/
        .container, .item, .page { 

            width: 320px;
            height: 180px;
            line-height: 180px;
            text-align: center;
            font-size: 24px;
        }

        .item {
            /*設定中間層旋轉時的動畫效果*/
            transition: all .4s ease;
        }

        .page {
            /*配合旋轉動畫*/
            transition 
: .4s;
            background-color: goldenrod;
            box-shadow: 4px 2px 4px #999;
        }

        .front {
            opacity: 1;
        }

        .back {
            /*設定位置與正面重合*/
            position: absolute;
            top: 0;
            left: 0;
            /*設定透明 預先旋轉180deg*/
            opacity 
: 0;
            transform: rotateY(180deg);
        }

        .container:hover .item{
            transform: rotateY(180deg);
        }

        .container:hover .front{
            opacity: 0;
        }

        .container:hover .back{
            opacity: 1;
        }
    </style>
    <link rel="manifest" href="./static/manifest.json" />
    <script src="./static/js/sw-server.js"></script>
</head>
<body>

<div class="container">
    <div class="item">
        <div class="page front">這是正面</div>
        <div class="page back">這是反面</div>
    </div>
</div>
</body>
</html>

CSS旋轉效果

效果圖： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS旋轉效果</title> &

css實現下拉選單以及下拉箭頭旋轉效果

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>下拉選單動畫製作</title><style>*{margin:0;pa

CSS實現3D正方體動態旋轉效果【原始碼+GIF圖】

小夥伴們看到那些頁面上炫酷的正方體，是不是都覺得美美的很精緻，很想自己動手寫一個屬於自己的，但是又學業繁忙而找不到時間去實現，今天我就為大家寫一個，噠噠噠，廢話不多說，開始上程式碼~ 額，要不先說說它的實現原理吧，方便理解，嘿嘿。實現原理：transition-proper

css模擬太陽系旋轉效果

程式碼： <style> body, html { display: flex; flex-direction: column; justify-content: cen

購物車css樣式效果

spl log tran eight type ack set ado tle 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UT

css毛玻璃效果

shadow relative 毛玻璃效果 class posit spa mar hid osi #left:before{ position: relative; z-index: -1; filter: blur(20px);

css loading 效果

name nbsp ttr back pos tran line lin att .loading{ width:160px; height:56px; position: absolute; top:50%; left:5

css loading效果

blog btn -type rotate color solid 技術分享 multipl angle <!DOCTYPE html> <head> <meta charset="utf-8"> <title>28

css動畫效果：實現鼠標移入菜單欄文字下出現下劃線

boa 代碼 active lock osi int 事件 type 添加 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

純css抖動效果

ati pen nbsp -name 技術 -m eve div mat HTML： 1 <button class="shake">按鈕</button> CSS： 1 .shake{ 2 width:

css - 美化效果代碼匯總

tom 利用 detail 100% 投影終極 rom lin 原理投影的設置 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transpa

前端使用者體驗優化： JS & CSS 各類效果程式碼段

前言不定時更新線上預覽 https://zzyper.github.io/opti... 線上預覽的原始碼 https://github.com/zzyper/opt... 部分內容僅相容webkit核心，其他核心自行查詢可控密度的虛線分隔線 css .line {

【typescript】兩個物品圍繞旋轉效果

記錄一下旋轉的原理，使用計時器來移動座標，或者改為按幀移動也可。程式碼裡的物件或其他介面，能看得懂就行，就不貼上來了。效果： private _circleCenter = {x: 279, y: 229};//中心，訂半徑 private _aPos

精通CSS+DIV網頁樣式與佈局 CSS文字效果

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

炫酷 CSS 背景效果的 10 個代碼片段

pos 圖片 http 動效變色基於用戶漸變 ani 面板在現代網頁設計中，大背景圖設計非常流行。隨著高清（現在是4K）顯示器的出現，越來越多的網頁設計師使用大背景圖來填充屏幕。因為這樣可以造成很大的視覺沖擊力，並有助於更好的傳遞所要表現的內容。但是，如果只是吧

html5 旋轉效果

html5 旋轉樣例：程式碼片段： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3D旋轉</title> <sty

常用的幾個CSS前端效果

做頁面需要一定的CSS基本功，雖然現在有很多成熟的框架如bootstrap等，我們輕鬆的就就可以做出一些頁面效果。但是掌握每一個常見效果的寫法還是很重要的，下面整理出一些常見的CSS前端效果，讓你更輕鬆的寫頁面。 1、禁止選擇文字 body { -webkit-touch-callout: none

前端學習記錄——CSS過渡效果

CSS過渡效果 transition 過渡的三個要素： 1、必須有屬性值發生變化； 2、必須明確哪個屬性值在發生變化； 3、必須制定屬性過渡的持續時長。 transition-property:設定要過渡的屬性，如果需要設定多個屬性，則把各個屬性用逗號隔開即可。

css3 animation動畫360旋轉。旋轉效果用transform:rotate過渡。

旋轉： <div class="lds-hourglass"></div> .lds-hourglass { display:inline-block; position:relative; width:72px; height:72

animate.css執行效果

做了一個animate.css的下拉框改變效果的h5頁面，用jq和vue寫的，如果要換成原生也很方便。自己隨便改改就可以用了。下面是整個h5頁面程式碼，要用就自己去下載animate.css，然後將js 的路徑修改一下就可以了。 <!DOCTYPE html> <html

CSS旋轉效果

相關推薦