perspective-origin: value; object.style.perspectiveOrigin = "value"; <'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 (%).
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: center;
transform-style: preserve-3d;
width: 100px;
}
.side
{
color: white;
font-family: sans-serif;
font-size: 50px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.side1
{
background-color: rgb(255 0 0 / 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.side2
{
background-color: rgb(255 255 0 / 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.side3
{
background-color: rgb(0 255 0 / 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.side4
{
background-color: rgb(0 255 255 / 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.side5
{
background-color: rgb(0 0 255 / 0.5);
transform: rotateY(180deg) translateZ(50px);
}
.side6
{
background-color: rgb(255 0 255 / 0.5);
transform: translateZ(50px);
}
</style>
</head>
<body>
<p>center</p>
<div class="cube">
<div class="side side1">1</div>
<div class="side side2">2</div>
<div class="side side3">3</div>
<div class="side side4">4</div>
<div class="side side5">5</div>
<div class="side side6">6</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: left;
transform-style: preserve-3d;
width: 100px;
}
.side
{
color: white;
font-family: sans-serif;
font-size: 50px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.side1
{
background-color: rgb(255 0 0 / 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.side2
{
background-color: rgb(255 255 0 / 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.side3
{
background-color: rgb(0 255 0 / 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.side4
{
background-color: rgb(0 255 255 / 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.side5
{
background-color: rgb(0 0 255 / 0.5);
transform: rotateY(180deg) translateZ(50px);
}
.side6
{
background-color: rgb(255 0 255 / 0.5);
transform: translateZ(50px);
}
</style>
</head>
<body>
<p>left</p>
<div class="cube">
<div class="side side1">1</div>
<div class="side side2">2</div>
<div class="side side3">3</div>
<div class="side side4">4</div>
<div class="side side5">5</div>
<div class="side side6">6</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: 0 100px;
transform-style: preserve-3d;
width: 100px;
}
.side
{
color: white;
font-family: sans-serif;
font-size: 50px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.side1
{
background-color: rgb(255 0 0 / 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.side2
{
background-color: rgb(255 255 0 / 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.side3
{
background-color: rgb(0 255 0 / 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.side4
{
background-color: rgb(0 255 255 / 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.side5
{
background-color: rgb(0 0 255 / 0.5);
transform: rotateY(180deg) translateZ(50px);
}
.side6
{
background-color: rgb(255 0 255 / 0.5);
transform: translateZ(50px);
}
</style>
</head>
<body>
<p>length</p>
<div class="cube">
<div class="side side1">1</div>
<div class="side side2">2</div>
<div class="side side3">3</div>
<div class="side side4">4</div>
<div class="side side5">5</div>
<div class="side side6">6</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: 100% 0;
transform-style: preserve-3d;
width: 100px;
}
.side
{
color: white;
font-family: sans-serif;
font-size: 50px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.side1
{
background-color: rgb(255 0 0 / 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.side2
{
background-color: rgb(255 255 0 / 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.side3
{
background-color: rgb(0 255 0 / 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.side4
{
background-color: rgb(0 255 255 / 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.side5
{
background-color: rgb(0 0 255 / 0.5);
transform: rotateY(180deg) translateZ(50px);
}
.side6
{
background-color: rgb(255 0 255 / 0.5);
transform: translateZ(50px);
}
</style>
</head>
<body>
<p>percentage</p>
<div class="cube">
<div class="side side1">1</div>
<div class="side side2">2</div>
<div class="side side3">3</div>
<div class="side side4">4</div>
<div class="side side5">5</div>
<div class="side side6">6</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: right;
transform-style: preserve-3d;
width: 100px;
}
.side
{
color: white;
font-family: sans-serif;
font-size: 50px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.side1
{
background-color: rgb(255 0 0 / 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.side2
{
background-color: rgb(255 255 0 / 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.side3
{
background-color: rgb(0 255 0 / 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.side4
{
background-color: rgb(0 255 255 / 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.side5
{
background-color: rgb(0 0 255 / 0.5);
transform: rotateY(180deg) translateZ(50px);
}
.side6
{
background-color: rgb(255 0 255 / 0.5);
transform: translateZ(50px);
}
</style>
</head>
<body>
<p>right</p>
<div class="cube">
<div class="side side1">1</div>
<div class="side side2">2</div>
<div class="side side3">3</div>
<div class="side side4">4</div>
<div class="side side5">5</div>
<div class="side side6">6</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
perspective-origin: top;
transform-style: preserve-3d;
width: 100px;
}
.side
{
color: white;
font-family: sans-serif;
font-size: 50px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.side1
{
background-color: rgb(255 0 0 / 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.side2
{
background-color: rgb(255 255 0 / 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.side3
{
background-color: rgb(0 255 0 / 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.side4
{
background-color: rgb(0 255 255 / 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.side5
{
background-color: rgb(0 0 255 / 0.5);
transform: rotateY(180deg) translateZ(50px);
}
.side6
{
background-color: rgb(255 0 255 / 0.5);
transform: translateZ(50px);
}
</style>
</head>
<body>
<p>top</p>
<div class="cube">
<div class="side side1">1</div>
<div class="side side2">2</div>
<div class="side side3">3</div>
<div class="side side4">4</div>
<div class="side side5">5</div>
<div class="side side6">6</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.cube
{
height: 100px;
margin: 100px;
perspective: 100px;
transform-style: preserve-3d;
width: 100px;
}
.side
{
color: white;
font-family: sans-serif;
font-size: 50px;
height: 100px;
line-height: 100px;
position: absolute;
text-align: center;
width: 100px;
}
.side1
{
background-color: rgb(255 0 0 / 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.side2
{
background-color: rgb(255 255 0 / 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.side3
{
background-color: rgb(0 255 0 / 0.5);
transform: rotateX(90deg) translateZ(50px);
}
.side4
{
background-color: rgb(0 255 255 / 0.5);
transform: rotateX(-90deg) translateZ(50px);
}
.side5
{
background-color: rgb(0 0 255 / 0.5);
transform: rotateY(180deg) translateZ(50px);
}
.side6
{
background-color: rgb(255 0 255 / 0.5);
transform: translateZ(50px);
}
</style>
</head>
<body>
<button>initial</button>
<button>bottom</button>
<button>center</button>
<button>left</button>
<button value="0 100px">length</button>
<button value="100% 0">percentage</button>
<button>right</button>
<button>top</button>
<p>perspective-origin</p>
<div class="cube">
<div class="side side1">1</div>
<div class="side side2">2</div>
<div class="side side3">3</div>
<div class="side side4">4</div>
<div class="side side5">5</div>
<div class="side side6">6</div>
</div>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector(".cube").style.perspectiveOrigin = myproperty;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>