<div id="app">
<h2>CSS3 Perspective Playground</h2>
<main>
<section class="settings">
<div class="settings-container">
<label for="">
perspective: {{perspective}}px;<br>
<input type="range" min="0" max="999"
v-model="perspective"/>
</label>
<br>
<label for="">
rotateX: {{rotateX}}deg; <br>
<input type="range" min="-180" max="180"
v-model="rotateX"/>
</label>
<br>
<label for="">
rotateY: {{rotateY}}deg; <br>
<input type="range" min="-180" max="180"
v-model="rotateY"/>
</label>
<br>
<label for="">
rotateZ: {{rotateZ}}deg; <br>
<input type="range" min="-180" max="180"
v-model="rotateZ"/>
</label>
<br>
<label for="">
transform-origin:{{transformOriginX }} {{transformOriginY}}; <br>
<div class="transform-origin-radio-buttons">
<div class="transform-origin-x">
<label for="t-left">
<input type="radio" name="transform-left"
value="left"
v-model="transformOriginX" id="t-left"/> left
</label>
<br>
<label for="t-right">
<input type="radio" name="transform-left"
value="right"
v-model="transformOriginX" id="t-right"/> right
</label>
<br>
<label for="t-center">
<input type="radio" name="transform-left"
value="center"
v-model="transformOriginX" id="t-center"/> center
</label>
</div>
<div class="transform-origin-y">
<label for="t-top">
<input type="radio" name="transform-right"
value="top"
v-model="transformOriginY" id="t-top"/> top
</label>
<br>
<label for="t-bottom">
<input type="radio" name="transform-right"
value="bottom"
v-model="transformOriginY" id="t-bottom"/> bottom
</label>
<br>
<label for="t-center2">
<input type="radio" name="transform-right"
value="center"
v-model="transformOriginY" id="t-center2"/> center
</label>
</div>
</div>
</label>
</div>
</section>
<section class="output">
<div class="box-container">
<div class="box" :style="{
transform: `perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`,
transformOrigin:`${transformOriginX} ${transformOriginY}`
}"></div>
</div>
</section>
</main>
</div>
@import url("https://fonts.googleapis.com/css?family=Varela+Round");
html {
box-sizing: border-box;
width: 100%;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
font-family: "Varela Round", sans-serif;
color: #ddd;
background: #343434;
}
h2 {
color: #f38181;
text-align: center;
font-size: 40px;
margin: 20px;
}
main {
display: flex;
justify-content: space-around;
align-items: center;
height: 420px;
max-width: 768px;
margin: 0 auto;
font-family: monospace, sans-serif;
font-size: 16px;
}
main label:not(:last-child) {
display: inline-block;
margin-bottom: 10px;
}
main label input[type="range"] {
display: inline-block;
margin-top: 5px;
}
section.settings {
width: 50%;
z-index: 2;
}
.box-container {
padding: 50px;
border: 1px solid #f38181;
}
.box {
width: 150px;
height: 150px;
background: #f38181;
}
.transform-origin-radio-buttons {
display: flex;
align-items: center;
margin-top: 10px;
}
.transform-origin-x {
margin-right: 10%;
}
View Compiled
new Vue({
el: "#app",
data: {
perspective: 100,
rotateX: 0,
rotateY: 0,
rotateZ: 0,
transformOriginX: "center",
transformOriginY: "center"
}
});
This Pen doesn't use any external CSS resources.