CSS
perspective-origin: value;
JS
object.style.perspectiveOrigin = "value";
Values
<'perspective-origin'> = <position>
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
Initial
bottom
center
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: center;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
transform: translateZ(50px);
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
transform: rotateY(180deg) translateZ(50px);
}
</style>
</head>
<body>
<p>center</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
left
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: left;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
transform: translateZ(50px);
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
transform: rotateY(180deg) translateZ(50px);
}
</style>
</head>
<body>
<p>left</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
length
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: 100px 100px;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
transform: translateZ(50px);
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
transform: rotateY(180deg) translateZ(50px);
}
</style>
</head>
<body>
<p>length</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
percentage
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: 100% 100%;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
transform: translateZ(50px);
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
transform: rotateY(180deg) translateZ(50px);
}
</style>
</head>
<body>
<p>percentage</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
right
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: right;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
transform: translateZ(50px);
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
transform: rotateY(180deg) translateZ(50px);
}
</style>
</head>
<body>
<p>right</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
top
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: top;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
transform: translateZ(50px);
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
transform: rotateY(180deg) translateZ(50px);
}
</style>
</head>
<body>
<p>top</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.face
{
color: white;
font-family: sans-serif;
font-size: 25px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.left
{
background-color: rgba(255, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.right
{
background-color: rgba(255, 255, 0, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.bottom
{
background-color: rgba(0, 255, 0, 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.top
{
background-color: rgba(0, 255, 255, 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.front
{
background-color: rgba(0, 0, 255, 0.5);
transform: translateZ(50px);
}
.back
{
background-color: rgba(255, 0, 255, 0.5);
transform: rotateY(180deg) translateZ(50px);
}
</style>
<script>
function myfunction(myvar)
{
document.querySelector(".cube").style.perspectiveOrigin = myvar;
}
</script>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">bottom</button>
<button onmouseover="myfunction(innerHTML)">center</button>
<button onmouseover="myfunction(innerHTML)">left</button>
<button onmouseover="myfunction(value)" value="100px 100px">length</button>
<button onmouseover="myfunction(value)" value="100% 100%">percentage</button>
<button onmouseover="myfunction(innerHTML)">right</button>
<button onmouseover="myfunction(innerHTML)">top</button>
<p>perspective-origin</p>
<div class="cube">
<div class="face left">left</div>
<div class="face right">right</div>
<div class="face bottom">bottom</div>
<div class="face top">top</div>
<div class="face front">front</div>
<div class="face back">back</div>
</div>
</body>
</html>
Internal
External