css transform定位,CSS3 transform:translate属性定位动画演示

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

padding: 0;

font-family: sans-serif;

color: white;

}

* {

transition: all 0.5s ease-in-out;

}

code {

font-family: monospace;

font-size: 15px;

margin-left: 5px;

margin-right: 5px;

color: #e785ad;

}

.buttons {

position: fixed;

color: white;

padding-left: 0;

bottom: 10px;

width: 100%;

text-align: center;

}

.buttons li {

list-style-type: none;

display: inline-block;

padding: 5px 10px;

background: #7f2b45;

border: 1px solid #444;

border-radius: 5px;

margin-top: 10px;

}

.buttons li:hover {

background: #b26b80;

cursor: pointer;

border: 1px solid #666;

}

.buttons li:not(:first-of-type):not(:last-of-type) {

margin-left: 20px;

}

.buttons li:nth-last-child(2) {

margin-right: 20px;

}

.wrapper {

width: 100%;

height: 100%;

position: fixed;

background: #111;

margin: 0;

padding: 0;

}

.dot {

width: 3px;

height: 3px;

background: white;

z-index: 2;

position: fixed;

left: 50%;

top: 50%;

border-radius: 100%;

transform: translate(-50%, -50%);

}

.box {

width: 100px;

height: 100px;

background: #333;

left: 50%;

top: 50%;

position: relative;

}

aside {

width: calc(45% - 120px);

position: fixed;

left: 5%;

top: 20px;

color: white;

line-height: 25px;

}

#result {

position: relative;

top: 20px;

left: 5%;

}

/*-----------------------------

-------------------------------

BEGIN REFERENCE POINTS

-------------------------------

-----------------------------*/

.ref-center {

transform: translate(-50%, -50%);

/* adjusts the point the left and top position use */

}

.ref-top-right {

transform: translate(-100%, 0%);

/* adjusts the point the left and top position use */

}

.ref-bottom-right {

transform: translate(-100%, -100%);

/* adjusts the point the left and top position use */

}

/*--- TOP LEFT DOESN'T EXIST BECAUSE THAT IS THE DEFAULT BEHAVIOR ---*/

.ref-bottom-left {

transform: translate(0%, -100%);

/* adjusts the point the left and top position use */

}

/*----------------------------

------------------------------

END REFERENCE POINTS

------------------------------

----------------------------/*

/*--- MEDIA QUERIES ---*/

@media all and (max-height: 500px) {

.box,

.dot {

bottom: 100px;

}

}

@media all and (max-height: 500px),

(max-width: 500px) {

.box {

width: 50px;

height: 50px;

}

aside {

width: calc(45% - 54px);

line-height: 18px;

font-size: 16px;

width: 90%;

left: 5%;

}

#result {

position: fixed;

bottom: 300px;

top: initial;

left: 5%;

width: 90%;

}

}

@media all and (max-height: 300px) {

.box,

.dot {

top: 25%;

left: 25%;

}

aside {

display: none;

}

#result {

bottom: initial;

left: initial;

top: 0;

width: 60%;

right: 0;

text-align: right;

padding-right: 10px;

padding-top: 10px;

}

}