标签：otp color 产生 otto img 一个 拼接 res size
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0;} ul{ list-style: none;} #box{ width:300px; height: 300px; border:1px black solid; margin:30px auto; perspective: 500px; perspective-origin: right top; } #box ul{ width:100px; height:100px; margin:100px; position: relative; transition: 4s; transform-style: preserve-3d; transform-origin: center center -50px; /* transform:scale3d(.5 , 2 , 4); */ } #box ul li{ width:100%; height: 100%; position: absolute; left:0; top:0; text-align: center; line-height: 100px; font-size:30px; } #box ul li:nth-of-type(1){ background:red;} #box ul li:nth-of-type(2){ background:blue; left:100px; transform-origin:left; transform:rotateY(90deg);} #box ul li:nth-of-type(3){ background:green; left:-100px; transform-origin:right; transform:rotateY(-90deg); } #box ul li:nth-of-type(4){ background:hotpink; top:-100px; transform-origin:bottom; transform:rotateX(90deg); } #box ul li:nth-of-type(5){ background:gray; top:100px; transform-origin:top; transform:rotateX(-90deg); } #box ul li:nth-of-type(6){ background:yellow; transform:translate3d(0,0,-100px) rotateY(180deg); } #box:hover ul{ transform:rotateY(360deg); /* transform:rotate3d(1,1,1,360deg); */ } </style> </head> <body> <div id="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html>
以上是一个立方体的代码，在制作过程中有一个基本的思想：拼接，就是首先要有一个装下六个面立方体的父盒子，然后是父盒子里面对应的六个子盒子，子盒子的六个面通过旋转或是移动形成相应的角度将立方体的形状拼接出来，最后在立方体上添加旋转达到旋转效果。/*逆战*/
刚刚接触的人会有3个疑惑点：
1、父盒子和子盒子的模型混淆，即并不清楚的父盒子里面装的是子盒子拼接出来的立方体，所以属性 transform-style: preserve-3d应当添加给父元素而非子元素；
2、旋转点的定位transform-origin: center center -50px也应当添加给父元素，应为最后旋转的是立方体而非立方体的一个面；
标签：otp color 产生 otto img 一个 拼接 res size
原文地址：https://www.cnblogs.com/htmllym/p/12344607.html
