คำถามติดแท็ก css-transforms

การใช้ CSS ฉันจะใช้มากกว่าหนึ่งได้transformอย่างไร ตัวอย่าง: ในตัวอย่างต่อไปนี้จะใช้การแปลเท่านั้นไม่ใช่การหมุน li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

603 css  css-transforms 

ฉันมีสถานการณ์ที่ในสถานการณ์ CSS ปกติ div ที่ตายตัวจะถูกวางตำแหน่งอย่างที่มันถูกระบุไว้ ( top:0px, left:0px) สิ่งนี้ดูเหมือนจะไม่ได้รับการเคารพถ้าฉันมีผู้ปกครองที่มีการแปลง translate3d ฉันไม่เห็นอะไรเหรอ? ฉันได้ลองใช้การแปลงเว็บอื่น ๆ อย่างมีสไตล์และเปลี่ยนตัวเลือกแหล่งกำเนิด แต่ก็ไม่มีโชค ฉันแนบJSFiddleพร้อมกับตัวอย่างที่ฉันคาดว่ากล่องสีเหลืองจะอยู่ที่มุมด้านบนของหน้าแทนที่จะเป็นด้านในขององค์ประกอบคอนเทนเนอร์ คุณสามารถดูซอเวอร์ชันด้านล่างได้ง่ายขึ้น: #outer { position:relative; -webkit-transform:translate3d(0px, 20px , 0px); height: 300px; border: 1px solid #5511FF; padding: 10px; background: rgba(100,180,250, .8); width: 80%; } #middle{ position:relative; border: 1px dotted #445511; height: 300px; padding: 5px; background: rgba(250,10,255, …

140 html  css  css-position  css-transforms 

สมมติว่าฉันมีคอลัมน์สองสามคอลัมน์ซึ่งบางคอลัมน์ฉันต้องการหมุนค่าของ: http://jsfiddle.net/MTyFP/1/ <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div> ด้วย CSS นี้: .statusColumn b { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; transform: rotate(-90deg); transform-origin: 50% 50%; } มันจะออกมาเป็นแบบนี้: เป็นไปได้ไหมที่จะเขียน CSS ที่จะทำให้องค์ประกอบที่หมุนแล้วส่งผลต่อความสูงของพาเรนต์เพื่อให้ข้อความไม่ทับซ้อนกับองค์ประกอบอื่น ๆ สิ่งนี้:

119 css  css-transforms 

ฉันมีปัญหาในการหมุนและวางตำแหน่งบรรทัดข้อความ ตอนนี้เป็นเพียงตำแหน่งที่ทำงาน การหมุนยังใช้งานได้ แต่ถ้าฉันปิดใช้งานการกำหนดตำแหน่งเท่านั้น CSS: #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } html เป็นเพียงข้อความธรรมดา

90 css  webkit  transform  css-transforms 

ฉันกำลังพยายามสร้างภาพเคลื่อนไหวสไตล์รถไฟเหาะด้วย CSS ฉันต้องการทราบวิธีโค้ง "รถไฟเหาะ" เมื่ออยู่ในระยะวนรอบ ฉันกำลังค้นหาโซลูชัน CSS ทั้งหมด แต่ถ้ามีความต้องการ JavaScript เล็กน้อยฉันก็ใช้ได้ รหัสของฉัน: #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: 10px; background: lightblue; position: absolute; bottom: 0; left: 1px; right: 1px; margin: 0 auto; } @keyframes …

15 html  css  css-animations  css-transforms