transform-origin 四个参数含义

Fighter168 2013-10-22 08:47:35

        <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Block Nav - CodePen</title>

<style>

* {font-size: 100%;}



html{background: #d4d4d4;}



a {

color: #2b2b2b;

text-decoration: none;

}



.blocks {

width: 470px;

margin: 0 auto;

}



.block {

position: relative;

float: left;

height: 50px;

width: 33.333333%;

font-size: 2em;

text-transform: uppercase;

}

.block .block--norm {

-webkit-transform: rotateX(-90deg);

-moz-transform: rotateX(-90deg);

-ms-transform: rotateX(-90deg);

-o-transform: rotateX(-90deg);

transform: rotateX(-90deg);

background: #1a1a1a;

color: #fefefe;

}

.block .block--hover {

-webkit-transform: rotateX(0deg);

-moz-transform: rotateX(0deg);

-ms-transform: rotateX(0deg);

-o-transform: rotateX(0deg);

transform: rotateX(0deg);

background: #ff0044;

}

.block:hover .block--norm {

-webkit-transform: rotateX(0deg);

-moz-transform: rotateX(0deg);

-ms-transform: rotateX(0deg);

-o-transform: rotateX(0deg);

transform: rotateX(0deg);

}

.block:hover .block--hover {

-webkit-transform: rotateX(90deg);

-moz-transform: rotateX(90deg);

-ms-transform: rotateX(90deg);

-o-transform: rotateX(90deg);

transform: rotateX(90deg);

}

.block div {

position: absolute;

top: 0;

padding: 30px;

box-shadow: 0px 0px 40px rgba(47, 47, 47, 0.6) inset;

-webkit-backface-visibility: hidden;

-webkit-font-smoothing: antialiased;

-webkit-transition: 400ms;

-moz-transition: 400ms;

-o-transition: 400ms;

transition: 400ms;

-webkit-transform-origin: 50% 50% -75px 50%;

-moz-transform-origin: 50% 50% -75px 50%;

-ms-transform-origin: 50% 50% -75px 50%;

-o-transform-origin: 50% 50% -75px 50%;

transform-origin: 50% 50% -75px 50%;

}</style>



<script>

window.confirm = function(){};

window.prompt  = function(){};

window.open    = function(){};

window.print   = function(){};

// Support hover state for mobile.

if (false) {

window.ontouchstart = function(){};

}

</script>

</head>

<body>

<div class="blocks">

<a href="#">

<div class="block">

<div class="block--norm">

<h2>Home</h2>

</div>

<div class="block--hover">

<h2>Home</h2>

</div>

</div>

</a>

<a href="#">

<div class="block">

<div class="block--norm">

<h2>Work</h2>

</div>

<div class="block--hover">

<h2>Work</h2>

</div>

</div>

</a>

<a href="#">

<div class="block">

<div class="block--norm">

<h2>About</h2>

</div>

<div class="block--hover">

<h2>About</h2>

</div>

</div>

</a>

</div>

<script>

if (document.location.search.match(/type=embed/gi)) {

window.parent.postMessage('resize', "*");

}

</script>

</body>

</html>